javascript - Joint.js Drag and Drop Element between two papers -
i implementing drag , drop between 2 papers .but stuck syncing of offset of dragged element cursor position have 2 papers in html body.i have minute experience css may causing problem of positioning of elements.
use case:-
user clicks on element paper 2 , starts dragging , go paper 1. on pointer clone of element added paper 1 on position of cursor in paper 1.
my strategy handle :-
when user clicks mousedown
1.dynamically create div
2.create third paper, call "flypaper" in new div make copy of element want clone, , add "flypaper"
3.create mousemove listener move div containing "flypaper" mouse
4.add mouseup event add clone of element "paper2" when user releases button.
5.clean "flypaper" div , events.
<body> <div id="paper" class="paper" style="border-style: solid;border-width: 5px;width:600px"></div> <div id="paper2" class="paper" style="border-style: solid;border-width: 5px;width:600px;display:inline-block" ondrop="drop(event)" ondragover="allowdrop(event)"></div> <script> var graph = new joint.dia.graph; var paper = new joint.dia.paper({ el: $('#paper'), width: 600, height: 200, model: graph, gridsize: 1 }); var rect = new joint.shapes.basic.rect({ position: { x: 100, y: 30 }, size: { width: 100, height: 30 }, attrs: { rect: { fill: 'blue' }, text: { text: 'my box', fill: 'white' } } }); graph.addcells([rect]); //////////////////////////////////////////////////////// var graph2 = new joint.dia.graph; var paper2 = new joint.dia.paper({ el: $('#paper2'), width: 600, height: 200, model: graph2, gridsize: 1 }); paper2.on('cell:pointerup',function (cellview, evt, x, y) { var rect4 = new joint.shapes.basic.rect({ position: { x: 10, y: 50 }, size: { width: 100, height: 30 }, attrs: { rect: { fill: 'blue' }, text: { text: 'my box', fill: 'white' } } }); graph.addcells([rect4]); }); paper2.on('cell:pointerdown',function (cellview, evt, x, y) { $('body').append('<div id="flypaper" class="box" style="position: fixed;z-index: 100;display:block;opacity:.7;"></div>'); var graph3 = new joint.dia.graph; var paper3 = new joint.dia.paper({ el: $('#flypaper'), width: 600, height: 200, model: graph3, gridsize: 1 }); var rect3 = new joint.shapes.basic.rect({ position: { x: 10, y: 50 }, size: { width: 100, height: 30 }, attrs: { rect: { fill: 'blue' }, text: { text: 'my box', fill: 'white' } } }); graph3.addcells([rect3]); $('body').mousemove(function(e){ var mousex = e.pagex; //get mouse move position var mousey = e.pagey; $( "div.box" ).offset({ top: mousey, left: mousex }); // $('div.box',this).css({'top': boxpositiony,'left': boxpositionx}) }); }); var rect2 = new joint.shapes.basic.rect({ position: { x: 10, y: 50 }, size: { width: 100, height: 30 }, attrs: { rect: { fill: 'blue' }, text: { text: 'my box', fill: 'white' } } }); graph2.addcells([rect2]); </script> </body>
i had same problem (and have clients won't pay rappid adds feature jointjs). here's snippet may others (see below).
the steps th same pointed out:
1.dynamically create div
2.create third paper, call "flypaper" in new div make copy of element want clone, , add "flypaper"
3.create mousemove listener move div containing "flypaper" mouse
4.add mouseup event add clone of element "paper2" when user releases button.
5.clean "flypaper" div , events.
the solution problem use cellview.model.clone() add right element , computation $.offset, $.width() & $.height() right flyingpaper postion , check if drop event occured on target paper.
<body> <div id="paper" class="paper" style="border-style: solid;border-width: 5px;width:600px"></div> <div id="paper2" class="paper" style="border-style: solid;border-width: 5px;width:600px;display:inline-block"></div> <script> // canvas sape dropped var graph = new joint.dia.graph, paper = new joint.dia.paper({ el: $('#paper'), model: graph }); // canvas take shapes var stencilgraph = new joint.dia.graph, stencilpaper = new joint.dia.paper({ el: $('#stencil'), height: 60, model: stencilgraph, interactive: false }); var r1 = new joint.shapes.basic.rect({ position: { x: 10, y: 10 }, size: { width: 100, height: 40 }, attrs: { text: { text: 'rect1' } } }); var r2 = new joint.shapes.basic.rect({ position: { x: 120, y: 10 }, size: { width: 100, height: 40 }, attrs: { text: { text: 'rect2' } } }); stencilgraph.addcells([r1, r2]); stencilpaper.on('cell:pointerdown', function(cellview, e, x, y) { $('body').append('<div id="flypaper" style="position:fixed;z-index:100;opacity:.7;pointer-event:none;"></div>'); var flygraph = new joint.dia.graph, flypaper = new joint.dia.paper({ el: $('#flypaper'), model: flygraph, interactive: false }), flyshape = cellview.model.clone(), pos = cellview.model.position(), offset = { x: x - pos.x, y: y - pos.y }; flyshape.position(0, 0); flygraph.addcell(flyshape); $("#flypaper").offset({ left: e.pagex - offset.x, top: e.pagey - offset.y }); $('body').on('mousemove.fly', function(e) { $("#flypaper").offset({ left: e.pagex - offset.x, top: e.pagey - offset.y }); }); $('body').on('mouseup.fly', function(e) { var x = e.pagex, y = e.pagey, target = paper.$el.offset(); // dropped on 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); } $('body').off('mousemove.fly').off('mouseup.fly'); flyshape.remove(); $('#flypaper').remove(); }); }); </script> </body> 
Comments
Post a Comment