Menu
The jQUery UI draggables sample named Default says that:
Enable draggable functionality on any DOM element.
But I'm not able to make them work on buttons elements.
I modified the Default sample to look like this:
I just changed the div element to a button one with type="button":
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Draggable - Default functionality</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.9.1.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.mouse.js"></script>
<script src="../../ui/jquery.ui.draggable.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
#draggable { width: 150px; height: 150px; padding: 0.5em; }
</style>
<script>
$(function() {
$( "#draggable" ).draggable();
});
</script>
</head>
<body>
<button type="button" id="draggable" class="ui-widget-content">
<p>Drag me around</p>
</button>
<div class="demo-description">
<p>Enable draggable functionality on any DOM element. Move the draggable object by clicking on it with the mouse and dragging it anywhere within the viewport.</p>
</div>
</body>
</html>
How I can make the draggables functionality work on a button element?
748
You have one of these problems: Your jQuery or jQuery UI Javascript path files are wrong. Your jQuery UI does not include draggable. Your jQuery or jQuery UI Javascript files are corrupted.
jQueryUI provides draggable() method to make any DOM element draggable. Once the element is draggable, you can move that element by clicking on it with the mouse and dragging it anywhere within the viewport.
Using cancel: false seems to work for me.
$(function() {
$( "#draggable" ).draggable({
cancel: false
});
});
jsfiddle
I guess without the cancel only the default click event of the button fires and with cancel you prevent the default click event.
150
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
