jQuery UI Snappable Ne pas retourner uniquement Snaps internes avec SnapMode Set

Question

Lorsque je configure un objet déplaçable sur Snap en une séquence (en faisant uniquement des snapshots internes), je vois souvent revenir les snapshots adjacents, bien qu'ils soient clairement en dehors d'eux. Notez le SnapMode, car il est la partie la plus importante:

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

Ceci est basé à l'origine sur cette question: How to find out about the "snapped to" element for jQuery UI draggable elements on snap

J'ai besoin des zones « pris en cliché » pour être à côté de l'autre par la conception I essaie de construire vers, comme ceci:

Mon jsFiddle la démonstration de cette question est ici: http://jsfiddle.net/myingling/dx54dapr/1/

(Essayez l'accrochage à Snap 2 et vous verrez qu'il SAIT qu'il s'accroche à BOTH Snap 1 et Snap 2!)

Answer 1

Le mode Snap vérifie si l'élément doit s'accrocher aux autres éléments. snapMode Détermine les bords des éléments d'accrochage auxquels le glissement sera lié. Donc, vous devez mettre un peu d'espace entre les boîtes et vous pouvez également utiliser 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>