Joint.js两个文件之间的拖放元素 [英] Joint.js Drag and Drop Element between two papers
问题描述
使用案例： -
用户点击纸张2上的元素，开始拖动去纸1.
On指针将该元素的克隆添加到纸1中光标位置的纸1上。
我的策略处理这是： -
当用户点击mousedown
1.动态创建div
2.创建第三篇文章，比如在新的div中称之为flypaper
创建要克隆的元素的副本，并将其添加到flypaper
3.创建一个mousemove监听器，将鼠标移动包含flypaper的div
4。添加一个将该元素的克隆添加到纸张的mouseup事件2当用户释放按钮时。
5.清理flypaperdiv和事件。
<身体GT;
< div id =paperclass =paperstyle =border-style：solid; border-width：5px; width：600px>< / div>
< div id =paper2class =paperstyle =border-style：solid; border-width：5px; width：600px; display：inline-blockondrop =drop（event） ondragover = 的AllowDrop（事件） >< / 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' ，填写：'white'}}
}）;
graph.addCells（[rect4]）;
}）;
paper2.on（'cell：pointerdown'，function（cellView，evt，x，y）{
$（'body'）。append（'< div id =flyPaperclass =框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 = pageX; //获取鼠标移动位置
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>
我有同样的问题（有客户赢了不需要为 rappid 付款，该功能将此功能添加到 jointjs ）。所以这里是一个可以帮助他人的片段（见下文）。
步骤与你指出的一样：_
1.动态创建一个div
2.创建第三篇文章，比如在新的div中称之为flypaper，创建要克隆的元素的副本，并将其添加到flypaper中
3.创建一个mousemove监听器，它将使用鼠标移动包含flypaper的div
4.添加一个mouseup事件，该事件将元素的克隆添加到paper2，当用户释放按钮。
5.清除flypaperdiv和事件。
您的问题的解决方案是使用 cellView.model.clone（）添加正确的元素，然后使用 $。offset ， $。width（）& $。height（）获得正确的飞纸位置，并检查目标纸张上是否发生了丢失事件。
<身体GT;
< div id =paperclass =paperstyle =border-style：solid; border-width：5px; width：600px>< / div>
< div id =paper2class =paperstyle =border-style：solid; border-width：5px; width：600px; display：inline-block>< / div>
< script>
//删除sape的Canvas
var graph = new joint.dia.Graph，
paper = new joint.dia.Paper（{
el：$（'＃paper '），
model：graph
}）;
//您从中获取形状的画布
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
}，
尺寸：{
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，
to p：e.pageY - offset.y
}）;
}）;
$（'body'）。on（'mouseup.fly'，function（e）{
var x = e.pageX，
y = e.pageY，
target = $ el.offset（）;
//丢弃纸？
如果（x> target.left&&&& x< target.left + paper。$ el 。$（$）$（$）$（$）$（$）
var s = flyShape.clone（）;
s.position（x - target.left - offset.x，y - target.top - offset.y）;
graph.addCell（s）;
}
$（'身体'）off（'mousemove.fly'）。off（'mouseup.fly'）;
flyShape.remove（）;
$（'＃flyPaper'）。remove（）;
}）;
}）;
< / script>
< / body>
I am implementing drag and drop between two papers .But I am stuck with the syncing of offset of dragged element with cursor position as I have two papers in my html body.I have very minute experience with css which may be causing problem of positioning of elements.
Use Case:-
User clicks on element from paper 2 and starts dragging and go to paper 1. On Pointer up a clone of that element is added to paper 1 on the position of cursor in paper 1.
My strategy to handle this is :-
When the user clicks mousedown
1.Dynamically create a div
2.Create a third paper, say call it "flypaper" in the new div Make a copy of the element that you want to clone, and add it to "flypaper"
3.Create a mousemove listener that will move the div containing "flypaper" with the mouse
4.Add a mouseup event that will add a clone of the element to the "paper2" when the user releases the button.
5.Clean up the "flypaper" div and 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 the same problem (and have clients who won't pay for rappid which adds this feature to jointjs). So here's a snippet that may help others (see below).
The steps are th same as you pointed out:
1.Dynamically create a div
2.Create a third paper, say call it "flypaper" in the new div Make a copy of the element that you want to clone, and add it to "flypaper"
3.Create a mousemove listener that will move the div containing "flypaper" with the mouse
4.Add a mouseup event that will add a clone of the element to the "paper2" when the user releases the button.
5.Clean up the "flypaper" div and events.
The solution to your problem was to use cellView.model.clone() to add the right element and then some computation with $.offset, $.width() & $.height() to get the right flyingpaper postion and to check if the drop event occured on the 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 where sape are dropped
var graph = new joint.dia.Graph,
paper = new joint.dia.Paper({
el: $('#paper'),
model: graph
});
// Canvas from which you 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 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);
}
$('body').off('mousemove.fly').off('mouseup.fly');
flyShape.remove();
$('#flyPaper').remove();
});
});
</script>
</body>
这篇关于Joint.js两个文件之间的拖放元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
