jQuery UI Snappable不能仅返回内部捕捉与捕捉模式设置

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

我需要“snappable”区为每设计我彼此相邻“M试图建立对，就像这样：

我的jsfiddle证明这个问题是在这里：http://jsfiddle.net/myingling/dx54dapr/1/

（尝试捕捉到捕捉2，你会看到它说它捕捉到捕捉1和捕捉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>