jQuery UI Snappable SnapMode 세트가있는 내부 스냅만 반환하지 않습니다.

Question

스냅인으로 스냅 가능한 객체를 설정하면 (내부 스냅 만 수행) 인접한 스냅을 외부로 명확하게 반환하는 것을보고 있습니다.

$(".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)); 
    } 
}); 

이 원래이 질문에 기반 : 가장 중요한 부분입니다 같이 SnapMode을 주목 How to find out about the "snapped to" element for jQuery UI draggable elements on snap

나는 디자인 I마다 서로 옆에있을 수있는 "스냅 샷되"영역이 필요합니다 과 같이,쪽으로 구축을 위해 노력하고있어 :

내 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>