javascript - Jquery:可拖动的敏感性

标签 javascript jquery jquery-ui jquery-ui-draggable

我有一个使用 jquery 的可拖动 DOM 元素。

如果客户端在没有移动的情况下单击它,则不会调用可拖动的开始,并且它的行为就像它不是可拖动的一样。

当客户端单击它并在按住鼠标的同时将鼠标移开 1 个像素时,拖动开始。事件被触发,类被应用等...

有没有一种方法可以仅在客户端单击该元素并将鼠标移开至少 10 像素时才触发拖动开始?

注意:这与滚动无关。

来自 https://jqueryui.com/draggable/ 现场演示的代码示例:

<style>#draggable { width: 150px; height: 150px; padding: 0.5em; }</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>

<script>
$(function(){
    $("#draggable").draggable(); 
    //goal is to only starts dragging if mouse moved more than 10px
});
</script>

<div id="draggable" class="ui-widget-content">
    <p>Drag me around</p>
</div>

最佳答案

您似乎想使用“距离”属性。 http://api.jqueryui.com/draggable/#option-distance

“鼠标按下后鼠标必须移动的距离(以像素为单位)才能开始拖动。此选项可用于防止在单击元素时出现不必要的拖动。”

$( "#draggable" ).draggable({
  distance: 10
});

关于javascript - Jquery:可拖动的敏感性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39113213/

相关文章:

javascript - JQuery 垂直选项卡 - 创建选项卡的附加链接

Javascript:Node.prototype 有什么不同吗?出于某种原因,我无法在没有错误的情况下修改它

javascript - AngularJS 迭代 Eventbrite 事件

javascript - React.js - 处理愚蠢 child 状态的模式?

jquery - 如何隐藏特定日期选择器jquery UI的日历

jquery - 如果条件为真,使 div 可拖动?

jquery - 如何在 jQuery UI Datepicker 上为过去的日期设置不同的类?

javascript - 使用 date-fns 获取两个范围内的重叠月份

php - jQuery 和 Ajax 返回不同的数据集,而不是创建单独的 ajax 调用

javascript - 日历不适用于 jQuery 1.9.1(但它适用于 jQuery 1.7.1)