Comment supprimer un élément d'un groupe dans JSPlumb ?

Question

En utilisant JSPlumb, je souhaite pouvoir faire glisser des éléments dans un groupe, les utiliser dans le groupe, puis les faire glisser. sortir du groupe. Mon code crée un groupe correctement, je peux y faire glisser un élément, déplacer le groupe correctement, mais l'élément reste à l'intérieur du groupe et je ne peux pas le faire glisser à nouveau... Des idées ?

(1) Configuration DIV

<div id="flowchartBox">

<div id="group1" class="groupBox" style="top:10px; left:300px"></div>
<br/>
  <div id="shape1" class="shape" style="top:10px; left:5px"></div>
  <div id="shape2" class="shape" style="top:10px; left:80px"></div>

  <div id="shape3" class="shape" style="top:200px; left:80px"></div>

</div>

(2) Javascript pour JSPlumb :

jsPlumb.ready(function() {

   jsPlumb.draggable($(".shape"), {containment:"parent"});

   jsPlumb.addGroup({
     el:group1,
     id:"g1",
     droppable:true,
    // constrain: false,
     //revert: false
     orphan: true
     //prune:true
    });

    });

comme vous pouvez le voir dans le code commenté, j'ai déjà essayé d'autres options que celles de les documents de la communauté jsplumb devraient aider, mais ils ne semblent pas l'être...

Answer 1

Je pense que le problème réside dans le fait que vous devez définir un conteneur pour que JSPlumb détecte qu'un élément a été déposé en dehors de son groupe.

Peut-être que la comparaison avec cette démo aidera à diagnostiquer le problème (il est utile d'utiliser le plein écran).

Le code enregistrera dans la console du navigateur chaque ajout ou suppression d'éléments, ainsi que le nombre d'éléments restants dans le groupe.

jsPlumb.setContainer($("body"));

jsPlumb.ready(function() {

  jsPlumb.draggable($(".shape"));

  jsPlumb.addGroup({
    el: group1,
    id: "g1",
    //droppable: true,
    //constrain: false,
    //revert: false
    orphan: true,
    //prune:true
  });

});

jsPlumb.bind("group:addMember", function(p) {
  var grp = jsPlumb.getGroup("g1");
  console.log("Group", p.group.id, "added", p.el.id, "for a total of", grp.getMembers().length, "members.");
});

jsPlumb.bind("group:removeMember", function(p) {
  var grp = jsPlumb.getGroup("g1");
  console.log("Group", p.group.id, "removed", p.el.id, "for a total of", grp.getMembers().length, "members.");
});

#group1 {
  background-color: gold;
  height: 100px;
}

.shape {
  text-align: center;
  position: absolute;
  background-color: whitesmoke;
  width: 50px;
  height: 50px;
  padding: 0.5em;
  float: left;
  margin: 10px 10px 10px 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script src="https://jsplumbtoolkit.com/lib/jsplumb.min.js"></script>

<div id="flowchartBox">
  <div id="group1" class="groupBox">Group Box 1</div>
  <div id="shape1" class="shape" style="top:110px; left:20px">Shape 1</div>
  <div id="shape2" class="shape" style="top:110px; left:100px">Shape 2</div>
  <div id="shape3" class="shape" style="top:110px; left:180px">Shape 3</div>
</div>