我正在对两个纸张之间实现拖放功能。但是,在处理拖动元素的偏移量与光标位置同步时,我被困住了,因为我的HTML body中有两个纸张。我对CSS的经验非常少,这可能会导致元素定位的问题。
应用场景:
用户从纸张2点击元素并开始拖动,然后移动到纸张1。当指针抬起时,该元素的克隆将添加到纸张1上,位置在纸张1中的光标位置。
我的解决策略是:
当用户点击mousedown时:
1.动态创建一个div
2.在新的div中创建第三个纸张,称其为"flypaper"。复制要克隆的元素,并将其添加到"flypaper"中。
3.创建一个mousemove监听器,以使包含"flypaper"的div随鼠标移动。
4.添加一个mouseup事件,当用户释放按钮时,将该元素克隆添加到"paper2"中。
5.清理"flypaper" div和事件。
应用场景:
用户从纸张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>