jQuery Droppable and Draggable

Question

J'ai une petite application où vous pouvez faire glisser une boîte dans un conteneur, et également changer de place avec un autre, qui est buggé pour le moment. Ils commutent des endroits comme jQuery, mais j'ai un problème avec Droppable. avec l'événement over, il ne s'active qu'une fois tout en maintenant la souris enfoncée.

http://jsfiddle.net/44SAh/

C'est ce que j'ai à ce jour, essayez de faire glisser une boîte vers le bas sur un autre, puis remonter à nouveau, sans lâcher le bouton gauche de la souris. Ça commence à pépiquer. C'est parce que l'événement over ne s'active qu'une fois par clic. Y at-il une solution de contournement pour cela, je veux être en mesure de faire glisser une boîte de haut en bas et avoir la même cohérence où ils changent de place, comme triable. Et non, je ne peux pas utiliser triable parce que les boîtes doivent être capables de se chevaucher dans une certaine mesure, et se déplacer librement.

Answer 1

Voici une solution de travail pour vous. Fondamentalement, vous cachez la position lorsque vous commencez à faire glisser quelque chose. Ensuite, lorsque vous dépassez une zone de dépôt, vous permutez la position de la zone de dépôt avec la position de départ, mettez à jour la position de départ du système et modifiez la structure de données sous-jacente pour la marquer comme corrigée. Voici un jsFiddle: http://jsfiddle.net/fordlover49/BwvK4/

$(function() { 
    $(".ui-widget-content").draggable({ 
     grid: [5, 5], 
     start: function(event, ui) { 
      // cache the position we were at when we started dragging. 
      $(this).data("startPos", ui.position); 
     }, 
     stack: ".ui-widget-content" 
    }); 

    $(".ui-widget-content").droppable({ 
     tolerance: 'intersect', 
     over: function(event, ui) {    
      var offset = $(ui.draggable).data("startPos"); 
      // update draggable's cached position to what the droppable was 
      $(ui.draggable).data("startPos", { 
       top: $(this).position().top, 
       left: offset.left}); 

      // swap droppable positions with dragging's original pos. 
      $(this).css("top", offset.top); 

      // clear the over events, and update the droppable's offset. 
      $(this).data("droppable").isout = 1; 
      $(this).data("droppable").isover = 0;    
      $(this).data("droppable").offset = $(this).offset(); 
     } 
    }); 
});