为什么在可拖动事件中显示和隐藏snap对象时，可拖动元素不响应snap选项?

why draggable elements aren't responding to snap options when snap object is being shown and hidden during draggable events?

本文关键字：拖动 snap 元素 选项 对象 不响应 隐藏 事件 显示 为什么      更新时间：2023-09-26

不知道标题是否足够清晰，但我想让一个可拖动的元素捕捉到隐藏在第一个地方的一些参考线，当我开始拖动元素时，它们被显示…但是这个元素不适合它们……就像，它不认识周围的东西....为什么呢?

I Made this Fiddle

http://jsfiddle.net/cLs7mq4p/

代码真的很简单

$(".block").draggable(
    {
        snap: ".guide",
        snapTolerance: 10,
        //grid: [10,10],
        start: function(event, ui) {
            $(".guide").show();
        },
        stop: function( event, ui) {
            $(".guide").hide();
        }
    });

其中HTML是这样的;

<div class="h-line guide" style="top: 100px"></div>
<div class="h-line guide" style="top: 400px"></div>
<div class="v-line guide" style="left: 80px"></div>
<div class="v-line guide" style="left: 400px"></div>
<div class="block"></div>

我得到了Jquery UI的帮助，因为它是一个bug，这个功能从来没有被任何其他人问过…所以这是使它工作的另一种选择:)

通过使用on mousedown事件

$(".block").draggable({
    snap: ".guide",
    snapTolerance: 10,
    stop: function( event, ui) {
        $(".h-line").css("display", "none");
    }
}).on( "mousedown", function() {
    $(".h-line").css("display", "block");
});

这是jQUery UI支持修复的JSFiddle和他们的评论:

你好msqar，感谢您花时间为jQuery UI You做贡献可以通过使用mousedown侦听器获得您正在寻找的行为吗因此，显示/隐藏发生在draggable的snap逻辑运行之前:http://jsfiddle.net/tj_vantoll/cLs7mq4p/2/。这不是我们打算在库中添加对的支持，因为snap选项还没有保留在可拖动小部件重写中。还有这个行为这是以前没有人要求过的。

希望它也适用于其他人:)

相关文章：