使用jQuery UI的可拖动按钮

我自己没有对此进行测试，但我有一种直觉，它将与按钮的mousedown的默认事件处理程序有关。 您可能希望在mousedown处理程序中试验事件.preventDefault() 。

或者，您可以将按钮包装在一个div中，然后再draggable() 。

它不是一个bug，使用它， $('input[type=button]').draggable({cancel:false}); 您需要取消按钮的默认单击事件。

默认情况下，JQuery禁用drags从以下元素开始：

• input ， textarea ， button ， select ， option

请参阅此处的当前规范： https ： //api.jqueryui.com/draggable/#option-cancel

这对我来说是不必要的自以为是和令人讨厌的。 但幸运的是，很容易禁用。 只需调整cancel选项即可。 例如，以下可拖动的初始化允许拖动在除.no-drag类之外的所有元素上启动：

 $ele.draggable({ cancel : '.no-drag' }); 

看起来这是一个jquery ui bug。

使用另一个可拖动的插件：

http://jsfiddle.net/CkKgD/

我在这里找到了插件： http ： //devongovett.wordpress.com/2009/12/01/event-delegated-drag-and-drop-jquery-plugin/

我首先使用它，因为jquery-ui draggable缺乏委托支持。

您可以使用CSS使div看起来像按钮。 这就是我在那种情况下大部分时间所做的事情。

cancel:false以下代码将取消默认点击事件：

 $( "#btn1 " ).draggable({ appendTo: "body", helper: "clone", cancel:false }); 

Html部分