Randomblue Randomblue - 4 months ago 7
jQuery Question

draggable button using jQuery UI

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

Answer

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().

Comments