How to remove item from a group in JSPlumb?

Question

Using JSPlumb, I want to be able to drag elements into a group, utilise them in the group, then drag them out of the group again. My code creates a group correctly, I can drag item into it, move the group correctly, but the item stays inside the group and I cannot drag it out again ... any thoughts?

(1) DIV setup

<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 for 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
    });


    });

as you can see from commented code, I have already tried other options that from the jsplumb community docs, should assist, but they don't seem to be...

Did you check this? constrained: { parent: "default", constrain: true } — Nguyễn Xuân Hoàng, Nov 13 '17 at 07:25

score 0 · Answer 1 · answered May 21 '17 at 12:59

I suspect the problem is you need to set a container for JSPlumb to detect that an item has been dropped outside its group.

Perhaps comparing against this demo will help diagnose the problem (it pays to run full screen).

The code will record in the Browser's console each time items are added or removed, along with a count of the remaining items in the group.

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>

How to remove item from a group in JSPlumb?

1 Answers1