jQuery用户界面可捕获，而不只是返回具有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));
    }
});

这最初是基于以下问题：如何在snap上查找jQuery UI可拖放元素的“剪贴到”元素

--我需要“可选”区域按照我想要构建的设计彼此相邻，比如：

​

演示此问题的jsFiddle是：http://jsfiddle.net/myingling/dx54dapr/1/

(试着抓拍到快照2，你会看到它说它是快照1和快照2!)

Answer 1

Snap模式检查该元素是否应该与其他元素相结合。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>

​