- xml - AJAX/Jquery XML 解析
- 具有多重继承的 XML 模式
- .net - 枚举序列化 Json 与 XML
- XML 简单类型、简单内容、复杂类型、复杂内容
我正在两篇论文之间实现拖放操作。但是由于我的 html 正文中有两篇论文,所以我坚持拖动元素的偏移量与光标位置的同步。我对 css 的经验非常少,这可能会导致问题元素的定位。
用例:-
用户单击纸 2 中的元素并开始拖动并转到纸 1。在 Pointer up 上,该元素的克隆被添加到纸 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 )。所以这里有一个可能对其他人有帮助的片段(见下文)。
步骤与您指出的相同:
1.动态创建一个div
2.创建第三张纸,在新的div中称它为“flypaper”复制你想要克隆的元素,并将其添加到“flypaper”
3.创建一个mousemove监听器,它会用鼠标移动包含“flypaper”的div
4.添加一个 mouseup 事件,当用户释放按钮时,该事件会将元素的克隆添加到“paper2”。
5.清理“flypaper”div 和事件。
您的问题的解决方案是使用 cellView.model.clone()
添加正确的元素,然后使用 $.offset
、$ 进行一些计算.width()
& $.height()
获取正确的飞纸位置并检查目标纸上是否发生了放置事件。
<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/
我在这里的意图是创建一个单线程的 will-make-you-a-better-programmer-just-for-reading 之类的 文章 或 论文 或 真正站起来的博文作者付出了很多努力来
我想知道是否有人有很好的资源可以阅读或编写代码来试验“自动完成” 我想知道自动完成背后的理论是什么,从哪里开始什么是常见的错误等。 我发现 Enso、Launchy、Google chrome 甚至
市场上有许多工具,如 MPS,它们促进了面向语言的编程,据说这使程序员能够为任务设计(理想的?)语言。出于某种原因,这听起来既有趣又无聊,所以我想知道是否有人知道并可以推荐有关该主题的文章。 谢谢 最
我正在编写一个使用 JointJS 来显示图表的应用。 但是,我希望能够在页面中动态添加和删除图表。添加新图表相当简单,但是当我删除图表时,删除 DOM 元素并让图表和纸张对象被垃圾收集是否安全? 最
我在声明非成员函数listOverview()时出错; void listOverview() { std::cout #include class Book; class Paper
关闭。这个问题需要更多focused .它目前不接受答案。 想改进这个问题吗? 更新问题,使其只关注一个问题 editing this post . 关闭 3 年前。 Improve this qu
我正在将 Raphael 与 Meteor 一起使用,但遇到了问题。我正在创建一个 paper通过使用 var paper = Raphael("paper", 800, 600);如果我将此代码放在
我正在使用acm LaTeX template我在使纸张双倍行距时遇到困难。 我的 LaTeX 文档如下所示: \documentclass{acm_proc_article-sp} \usepack
H.Chi Wong、Marshall Bern 和 David Goldberg 的论文“An Image Signature for any kind image”中提到的算法步骤背后的原因是什么
我一直在使用Microsoft Academic Knoledge API一周了,直到现在我还没有遇到任何问题。我想获取某个 session 的所有论文,例如 ICLR 或 ICML。我正在尝试使用从
我正在读这篇论文Understanding Deep learning requires rethinking generalization我不明白为什么在第 5 页第 2.2 节“含义、Redema
就目前情况而言,这个问题不太适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持,但这个问题可能会引发辩论、争论、民意调查或扩展讨论。如果您觉得这个问题可以改进并可能重新开放,visit
我必须为非程序员(我们公司的客户)创建一个 DSL,它需要提供一些更高级别的语言功能(循环、条件表达式、变量...... - 所以它不仅仅是一个“简单”的 DSL)。 使用 DSL 应该很容易;人们应
在卷积神经网络中梯度数据的可视化中,使用 Caffe 框架,已经可视化了所有类的梯度数据,对特定类采用梯度很有趣。在“bvlc_reference_caffenet”模型的 deploy.protot
auto(x)表达式被添加到语言中。一个理性的原因是我们无法以此完善前向衰减。 template constexpr decay_t decay_copy(T&& v) noexcept( i
我是一名优秀的程序员,十分优秀!