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>Its not a bug , use this, $('input[type=button]').draggable({cancel:false});
You need to cancel the default click event of the button.
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 disables drags from starting on the following elements by default:
input, textarea, button, select, optionSee the current spec here: https://api.jqueryui.com/draggable/#option-cancel
This is (to me) unnecessarily opinionated and annoying. But luckily it's easy to disable. Simply adjust the cancel option. For example, the following draggable initialization allows drags to start on all elements except .no-drag classes:
$ele.draggable({
cancel : '.no-drag'
});
looks like it's a jquery ui bug.
with another draggable plugin it works:
I found the plugin here: http://devongovett.wordpress.com/2009/12/01/event-delegated-drag-and-drop-jquery-plugin/
and in the first place I used it because of the lack of delegation support in jquery-ui draggable.
You can make a div look like button using CSS. That's what I did most of time in that kind of cases.
Having cancel:false following code would cancel the default click event:
$( "#btn1 " ).draggable({
appendTo: "body",
helper: "clone",
cancel:false
});
Html part
<input type="submit" id="btn1" value="button">
