我正在实现两张纸之间的拖放。但是由于我在html正文中有两张纸，所以我一直停留在拖动元素的偏移与光标位置的同步上。我对css有很细的经验，这可能会导致css的定位问题元素。
用例:
用户单击纸张2上的元素，然后开始拖动并转到纸张1。
在“向上指针”上，该元素的克隆被添加到纸张1中光标在纸张1上的位置。
我处理这个问题的策略是:
当用户单击mousedown时
1，动态创建一个div
2.创建第三篇论文，在新的div中称其为“flypaper”
复制要克隆的元素，然后将其添加到“flypaper”中
3.创建一个mousemove监听器，该监听器将用鼠标移动包含“flypaper”的div
4.添加mouseup事件，当用户释放按钮时，该事件会将元素的克隆添加到“paper2”。
5.清理“flypaper” div和事件。
<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>
最佳答案
我也遇到了同样的问题(有些客户不愿为rappid支付费用，而jointjs将此功能添加到了View on codepen)。因此，这是一个可以帮助他人的代码段(请参见下文)。
步骤与您指出的相同:
1，动态创建一个div
2.创建第三张纸，在新的div中称其为“flypaper”。复制要克隆的元素，然后将其添加到“flypaper”中。
3.创建一个mousemove监听器，该监听器将用鼠标移动包含“flypaper”的div
4.添加mouseup事件，当用户释放按钮时，该事件会将元素的克隆添加到“paper2”。
5.清理“flypaper” div和事件。
解决您的问题的方法是使用cellView.model.clone()添加正确的元素，然后使用$.offset，$.width()和$.height()进行一些计算以获得正确的飞纸位置，并检查是否在目标纸张上发生了掉落事件。
ojit_a
<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>
关于javascript - 两篇论文之间的Joint.js拖放元素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31283895/