我正在尝试在 d3js 中绘制一个 UI,其中我有一个顶部面板,我应该能够drag
和 drop
元素到一个组中并复制它们。我已经实现了那个目标,但是我的代码中有一个错误。我真正想做的是,拖动 circle
并复制它。但是,当我单击顶部面板中的 circle
时,它会自动触发拖动事件并自行复制。我怎样才能阻止这种行为?
<svg height="600" width="600" style="background: black">
<g>
<rect x="0" y="0" , width="600" height="40" style="fill:gold;"></rect>
<circle id='drag' cx="15" cy="20" init-cx="15" init-cy="20" r="10"
style="stroke: white; stroke-width: 2px; fill:blue"/>
</g>
<g id="playground">
<g>
<circle id='top' cx="180" cy="120" r="30" style="stroke: white; stroke-width: 2px; fill:white"/>
</g>
<g>
<circle id='top' cx="200" cy="220" r="30" style="stroke: white; stroke-width: 2px; fill:white"/>
</g>
<g>
<circle id='top' cx="320" cy="150" r="50" style="stroke: white; stroke-width: 2px; fill:white"/>
</g>
</g>
</svg>
<script>
$(document).ready(function () {
var move = d3.behavior.drag()
.on('drag', function () {
console.log('dragging');
var curr = d3.select(this)
.attr({
cx: d3.mouse(this)[0],
cy: d3.mouse(this)[1]
})
})
.on('dragend', function () {
var curr = d3.select(this);
d3.select('#playground')
.append('circle')
.attr({
cx : curr.attr('cx'),
cy : curr.attr('cy'),
r : curr.attr('r')
})
.style({
fill : 'white',
stroke : 'red',
'stroke-width' : '2px'
})
;
curr.attr({
cx : curr.attr('init-cx'),
cy : curr.attr('init-cx')
});
})
;
d3.select('#drag').call(move);
});
</script>
最佳答案
希望对你有用 看一看。 我在“dragend”中添加了很少的代码,在这里我决定是否通过使用 circle 的属性(如 init-cx 和 init-cy)来创建/附加一个圆到 Playground 。我添加的代码是
var initX = (curr.attr('init-cx')*1);
var currX = (curr.attr('cx')*1);
var initY = (curr.attr('init-cy')*1);
var currY = (curr.attr('cy')*1);
if(((currX) > (initX+20)) || ((currY) > (initY+20))){
//Here code to append a circle to playground
}
:D
关于javascript - d3js 防止拖拽点击事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33908765/