Éviter le chevauchement entre plusieurs toiles déplaçables avec jQuery

J'essaie de faire glisser trois toiles en même temps pour éviter qu'elles se chevauchent. J'ai cherché des questions similaires sur le sujet et j'ai découvert la bibliothèque "jquery-ui-draggable-collision". Ceux-ci est le code que j'ai:Éviter le chevauchement entre plusieurs toiles déplaçables avec jQuery

$(document).ready(function(){ 

      $(".cube").draggable({ obstacle: ".obstacle", preventCollision: true }); 
     }); 


<body> 
    <canvas class="cube obstacle" id="c"></canvas> 
    <canvas class="cube obstacle" id="c2"></canvas> 
    <canvas class="cube obstacle" id="c3"></canvas> 
</body>

Mon problème est que d'être une toile l'objet à glisser et l'obstacle en même temps, il est de ne pas bouger du tout. Je me demande si vous pouvez m'aider avec ça.

Source

2011-09-27 lgomezma

Vous pouvez essayer de changer le sélecteur d'obstacles à quelque chose comme:

"canvas.obstacle[id!=" + theIdYouDontWant + "]"

Il faut choisir une autre toile d'obstacle de classe.

$(document).ready(function(){ 
    // Everything that can be dragged around 
    var $draggables = $("canvas.cube"); 
    var id, $draggableItem; 

    // Go through each item, get it's id, 
    // and tell draggable() to collide with every obstacle but itself 
    for (var i = 0; i < $draggables.length; i++) { 
     $draggableItem = $draggables.eq(i); 
     id = $draggableItem.attr("id"); 

     $draggableItem.draggable({ 
      obstacle: "canvas.obstacle[id!=\"" + id + "\"]", 
      preventCollision: true 
     }); 
    } 
});

Source

2011-09-27 17:31:33 btleffler

Salut, j'ai essayé ceci mais encore ils ne déplaceraient aucun des draggables. – lgomezma

Il peut être plus facile de parcourir chaque élément de canevas déplaçable. Je vais éditer mon code. – btleffler

Cela fonctionne maintenant! Merci beaucoup – lgomezma

Éviter le chevauchement entre plusieurs toiles déplaçables avec jQuery

Répondre

Questions connexes