Drag and drop between two papers on a cell - JointJs

Question

I'm using this solution (Joint.js Drag and Drop Element between two papers) to drag and drop over two papers which it works perfectly.

I would like to know if it exists a way to know if you drop the ghost (ie. the cell in the flyPaper graph) over a cell in the main graph and if it is possible, how can I get this cell.

In fact, I would like to do different actions depending on where the cell is dropped in the main graph. For example, if the cell is dropped on another cell (which has a precise type) etc.

Thanks for your help.

score 1 · Accepted Answer · answered Dec 16 '19 at 16:16

This is called "reparenting" and the following code from JointJs describe how to do reparenting but in one paper (not through two papers) - Reparenting

the Main idea is to embed this cell into the parent cell, which is done using the following code:

$('body').on('mouseup.fly', function(e) {
    var x = e.pageX,
      y = e.pageY,
      target = paper.$el.offset();

    // Dropped over paper ?
    if (x > target.left && x < target.left + paper.$el.width() && y > target.top && y < target.top + paper.$el.height()) {
      var s = flyShape.clone();
      s.position(x - target.left - offset.x, y - target.top - offset.y);
      graph.addCell(s);
      //get the parent cell and embed the dragged cell with it
      if (cellViewsBelow.length) {
        var cellViewBelow;
        for (var i = 0; i < cellViewsBelow.length; i++) {              
          if (cellViewsBelow[i].model.id !== s.id) {
            cellViewBelow = cellViewsBelow[i];
          }
        }
        // Prevent recursive embedding.
        if (cellViewBelow && cellViewBelow.model.get('parent') !== s.id) {
          cellViewBelow.model.embed(s);
        }
      }
    }

Drag and drop between two papers on a cell - JointJs

1 Answers1