Reputation: 116403
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>
Upvotes: 18
Views: 21839
Reputation: 125
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">
Upvotes: 0
Reputation: 16048
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()
.
Upvotes: 9
Reputation: 7103
JQuery disables drags from starting on the following elements by default:
input
, textarea
, button
, select
, option
See 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'
});
Upvotes: 5
Reputation: 581
Its not a bug , use this, $('input[type=button]').draggable({cancel:false});
You need to cancel the default click event of the button.
Upvotes: 58
Reputation: 14161
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.
Upvotes: 1
Reputation: 20620
You can make a div look like button using CSS. That's what I did most of time in that kind of cases.
Upvotes: 0