logo标签列表

jQuery UI draggable()无法将按钮制作为可拖动的。

jquery-uibuttonjquery-ui-draggable
18

jQUery UI draggables 的一个名为 Default 的示例说明：

启用任何 DOM 元素的可拖动功能。

但我无法使它们在 button 元素上工作。

我修改了 Default 示例，使其如下所示：

我只是将 div 元素更改为 button 元素，并添加了 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>

如何使可拖动功能在按钮元素上生效？

1个回答
47

cancel: false 对我来说似乎有效。

    $(function() {
    $( "#draggable" ).draggable({
        cancel: false
    });
});

jsfiddle

我猜没有cancel时，按钮只触发默认的点击事件；而使用cancel可以防止默认的点击事件。

谢谢！运行得非常顺利！ - Diosney
然而，它不能像可拖拽元素一样有效地抛出可投放元素事件。你有解决办法吗？ - Diosney
“droppables events”是什么意思？如果我将其放在“droppable”小部件上，它会像任何其他元素一样被识别。【fiddle】（http://jsfiddle.net/SirDerpington/wzaJH/1/） - SirDerpington
1
没问题。如果您有任何进一步的问题，请随时提出另一个问题。也许可以提供一个jsfiddle ;) - SirDerpington
好的，谢谢！我通常使用jsfiddle来展示代码示例（请查看我的其他答案或问题），但现在我所处的网络连接非常慢（相信我，是28kbps的拨号连接），jsfiddle对我来说太慢了，所以暂时禁用这个工具:D 哈哈哈 - Diosney
+1，因为它解决了我的问题。但是我并不理解它的工作原理，因为根据API，它应该用于限制元素的拖动。在我的情况下，我只需要使用任何值的cancel属性，我尝试了所有的值，如false、true、"anmol"、""，都像魔法一样起作用，按钮可以移动。再次问一下，这是怎么回事呢？ :) - Anmol Saraf
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接