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>