javascript - jQuery UI Snappable 不返回仅带有 SnapMode 集的内部快照

Question

当我将可拖动对象设置为捕捉到跨度(仅进行内部捕捉)时，我发现它经常返回相邻的捕捉，尽管显然在它们之外。注意 SnapMode ，因为它是最重要的部分:

$(".draggable").draggable({
    snap: ".snap",
    snapMode: "inner",
    stop: function(event, ui) { 
        /* Get the possible snap targets: */
        var snapped = $(this).data('draggable').snapElements;

        /* Pull out only the snap targets that are "snapping": */
        var snappedTo = $.map(snapped, function(element) {
            return element.snapping ? element.item : null;
        });

        /* Display the results: */
        var result= '';
        $.each(snappedTo, function(idx, item) {
            result += $(item).text() + ", ";
        });

        $("#results").html("Snapped to: " + (result === '' ? "Nothing!" : result));
    }
});

这最初是基于这个问题:How to find out about the "snapped to" element for jQuery UI draggable elements on snap

根据我尝试构建的设计，我需要“可捕捉”区域彼此相邻，如下所示:

演示此问题的我的 jsFiddle 在这里:http://jsfiddle.net/myingling/dx54dapr/1/

(尝试捕捉到 Snap 2，你会看到它说它同时捕捉到 Snap 1 和 Snap 2!)

Answer 1

捕捉模式检查元素是否应该捕捉到其他元素。 snapMode 确定可拖动对象将捕捉到捕捉元素的哪些边缘。所以你需要在盒子之间留一些空隙，你也可以使用snapTolerance。

$(".draggable").draggable({
    snap: ".snap",
    snapMode: "inner",
    stop: function(event, ui) { 
        /* Get the possible snap targets: */
        var snapped = $(this).data('ui-draggable').snapElements;
       
        /* Pull out only the snap targets that are "snapping": */
        var snappedTo = $.map(snapped, function(element) {
            return element.snapping ? element.item : null;
        });
       
        /* Display the results: */
        var result= '';
        $.each(snappedTo, function(idx, item) {
            result += $(item).text() + ", ";
        });
        
        $("#results").html("Snapped to: " + (result === '' ? "Nothing!" : result));
    }
});

.draggable { 
    width: 90px; 
    height: 80px; 
    padding: 5px; 
    font-size: .9em; 
}

.snap { 
    width: 300px; 
    height: 100px;
    margin-top: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script
  src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"
  integrity="sha256-xNjb53/rY+WmG+4L6tTl9m6PpqknWZvRt0rO1SRnJzw="
  crossorigin="anonymous"></script>
<link href="https://ajax.microsoft.com/ajax/jquery.ui/1.8.7/themes/black-tie/jquery-ui.css" rel="stylesheet"/>

<div id="snap-one" class="snap ui-widget-header">Snap 1</div>
<div id="snap-two" class="snap ui-widget-header">Snap 2</div>

<div class="demo">
    <br clear="both" />
    
    <div id="draggable" class="draggable ui-widget-content">
        <p>Oh Snap!</p>
    </div>
    <div id="results"></div>
</div>