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

私はデザインごとに互いに隣接する「スナップ可能」の領域を必要とする私は、そのような方に構築しようとしている：

マイ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>