Question

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

如果我执行以下操作：

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

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

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

我认为随之而来的是混乱。在任何情况下，我都想为drag方法定义属性，所以我想把它放在我的小部件中。第二个问题是：如何扩展$ .ui.draggable？你有什么好教程吗？简单地说这个似乎不够：

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

非常感谢任何见解！

Answer 1

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

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

    };
})(jQuery)

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

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

Answer 2

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

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

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

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

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

如何使jquery-ui小部件可拖动

2 个答案: