使用 jQuery UI 的可拖动按钮 [英] draggable button using jQuery UI

问题描述

我可以轻松地使

元素可拖动，但不能使 元素成为可拖动元素.我怎样才能使 也可以拖动?

$(init);函数初始化(){$('#makeMeDraggable1').draggable();$('#makeMeDraggable2').draggable();}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script><script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.js"></script><div id="makeMeDraggable1">拖拽我！</div><button id="makeMeDraggable1">拖拽我！</button>

查看 JSFiddle

解决方案

我自己没有测试过这个，但我有一种直觉，它与按钮的默认事件处理程序有关.您可能想在 mousedown 处理程序中试验 event.preventDefault().

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

I can easily make a <div> element draggable, but not a <button> element. How can I make the <button> draggable, too?

$(init);

function init() {
  $('#makeMeDraggable1').draggable();
  $('#makeMeDraggable2').draggable();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.js"></script>

<div id="makeMeDraggable1">Drag me!</div>
<button id="makeMeDraggable1">Drag me!</button>

View at JSFiddle

解决方案

I haven't tested this myself, but I've got an intuition that it will have something to do with a button's default event-handler for mousedown. You might want to experiment with event.preventDefault() inside a mousedown handler.

Alternatively, you could wrap the button in a div that you then draggable().

这篇关于使用 jQuery UI 的可拖动按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！