扩展 jQuery答案

【问题标题】：Extending jQuery扩展 jQuery
【发布时间】：2011-10-13 09:54:37
【问题描述】：

我正在尝试向使用 jQuery 的网站添加一些现有功能（我想让 draggable 功能与 live() 一起使用）。

我找到了一些代码，但我无法让它工作。

(function ($) {
   $.fn.liveDraggable = function (opts) {
      this.live("mouseover", function() {
         if (!$(this).data("init")) {
            $(this).data("init", true).draggable(opts);
         }
      });
   };
}(jQuery));

我在加载 jQuery 和 jQuery UI 之后添加了代码，在我实际使用它之前添加了代码，但是，当我尝试使用它时，我收到以下错误：

$('.myclass').liveDraggable({}) is undefined.

谁能帮忙？

【问题讨论】：

$('.myclass').liveDraggable({}) 是 undefined 因为你什么都不返回。
你确定它是liveDraggable，它说它是未定义的吗？我假设您在 jQuery 核心之后包含 jQuery UI？
是的，我已经编辑了问题以澄清
@Rocket - 是的，该函数应该被定义并且可以调用，但它没有通过返回集合 n 顺序进行链接来遵守正确的插件实践。 @Dan - 你是不是想在liveDraggable 的电话中串连一些东西？
是的，调用 droppable

标签： jquery jquery-plugins

【解决方案1】：

您的代码运行良好。 $('.myclass').liveDraggable({}) 将返回 undefined，因为没有 return 语句。通常，你想return this 这样你就可以链接调用。

(function ($) { 
   $.fn.liveDraggable = function (opts) {
      return this.live("mouseover", function() {
         if (!$(this).data("init")) {
            $(this).data("init", true).draggable(opts);
         }
      });
   };
}(jQuery));

现在您可以将它与其他 jQuery 方法链接起来。

$('.myclass').liveDraggable({}).live('click', function(){
  // code
});

【讨论】：

【解决方案2】：

您需要包含 jQuery UI 脚本才能使其工作（不仅仅是核心 jQuery），另请参阅 here。

而且，这段代码看起来也来自这个 SO 线程，其中也有一些用法示例：jQuery Drag And Drop Using Live Events

【讨论】：