可拖动的按钮使用jQuery UI

我可以很容易地做出< div>元素可拖动,但不是< button>元件.如何使< button>可拉扯吗？

$(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

解决方法

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

或者,您可以将按钮包裹在您然后draggable()的div中.