JointJS: Preview Drag & Drop

by Roman Bruckner

HTML

<html>

  <head>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" />
  </head>

  <body>
    <!-- content -->
    <div id="paper" style="margin: 20px;"></div>

    <!-- dependencies -->
    <script src="https://cdn.jsdelivr.net/npm/@joint/[email protected]/dist/joint.min.js"></script>
  </body>

</html>

JavaScript

var graph = new joint.dia.Graph({}, {
  cellNamespace: joint.shapes
});

const paper = new joint.dia.Paper({
  el: document.getElementById('paper'),
  width: 800,
  height: 900,
  model: graph,
  cellViewNamespace: joint.shapes,
  gridSize: 10,
  async: true,
	interactive: false,
});

const rect1 = new joint.shapes.standard.Rectangle();
rect1.resize(100, 100).position(100, 30).attr('label/text', 'rect1');

const rect2 = new joint.shapes.standard.Rectangle();
rect2.resize(100, 100).position(400, 30).attr('label/text', 'rect2');

const rect3 = new joint.shapes.standard.Rectangle();
rect3.resize(100, 100).position(100, 200).attr('label/text', 'rect3');

graph.addCells([rect1, rect2, rect3]);

paper.on('element:pointermove', function(view, evt, x, y) {
    const data = evt.data;
    let ghost = data.ghost;
    if (!ghost) {
        const position = view.model.position();
        ghost = view.vel.clone();
        ghost.attr('opacity', 0.3);
        ghost.attr('pointer-events', 'none');
        ghost.appendTo(this.viewport);
        evt.data.ghost = ghost;
        evt.data.dx = x - position.x;
        evt.data.dy = y - position.y;
    }
    ghost.attr('transform', 'translate(' + [x - data.dx, y - data.dy] + ')');

    const viewUnder = paper.findView(evt.target);
    const prevViewUnder = data.viewUnder;
    data.timer && clearTimeout(data.timer);
    if (viewUnder && viewUnder !== view) {
        const timer = setTimeout(() => {
            console.log('Hovering over:', viewUnder.model.attr('label/text'));
        }, 1000);
        data.timer = timer;
        if (prevViewUnder !== viewUnder) {
            if (prevViewUnder) {
                joint.highlighters.mask.remove(prevViewUnder, 'view-under');
            }
            joint.highlighters.mask.add(viewUnder, 'body', 'view-under');
            data.viewUnder = viewUnder;
        }
    } else {
        if (prevViewUnder) {
            joint.highlighters.mask.remove(prevViewUnder, 'view-under');
            delete...