0

我需要澄清一些 jquery-ui 概念，并且可以使用您的帮助。

如果我执行以下操作：

$("<div></div>").draggable();

jquery-ui 将创建一个包装所选 div 的可拖动对象。但是，我已经创建了自己的小部件（使用$.widget("namespace.mywidget"），所以，我的第一个问题是，调用它时会发生什么？

$("<div></div>").draggable().mywidget();

我想接下来会出现混乱。无论如何，我想为拖动方法定义属性，所以我想把它放在我的小部件中。因此，第二个问题是：如何扩展 $.ui.draggable ？你有什么好的教程吗？简单地调用它似乎是不够的：

$.widget( "namespace.mywidget", $.ui.draggable, {} );

非常感谢您的任何见解！

4

2 回答 2

0

在使用 draggable 之前，请确保元素在 DOM 中：

$('<div></div>').appendTo(document.body)

然后，您可以将您的小部件和可拖动的链接在一起：

   $('<div></div>').appendTo(document.body)
     .mywidget()
     .draggable();

您可以在每个小部件调用上设置您想要的任何参数。我在jsfiddle.net/bseth99/LEY9A/创建了一个示例，它构建了一个简单的自定义 UI 小部件作为参考和演示目的。

于 2012-08-26T14:33:06.030 回答
0

只需将其包含在您的插件中即可。确保在插件代码之前包含 jqueryUI。

(function($){
    $.fn.myWidget = function(){
        return this.each(function(){
            $(this).draggable();
        });

    };
})(jQuery)

$('<div></div>').myWidget();  // this should be draggable.

http://jsfiddle.net/gJ3CN/2/

于 2012-08-25T20:48:48.650 回答