[英]D3js drag vs click
我正在使用節點的拖放功能對d3js樹進行編碼。 我遇到了這個示例http://jsfiddle.net/langdonx/fe5gn/ 。
var container,
rect,
dragBehavior,
wasDragged = false;
container = d3.select('svg')
.append('g');
rect = container.append('rect')
.attr('width', 100)
.attr('height', 100);
dragBehavior = d3.behavior.drag()
.on('dragend', onDragStart)
.on('drag', onDrag)
.on('dragend', onDragEnd);
container
.call(dragBehavior)
.on('click', onClick);
function flashRect() {
rect.attr('fill', 'red').transition().attr('fill', 'black');
}
function onDragStart() {
console.log('onDragStart');
}
function onDrag() {
console.log('onDrag');
var x = (d3.event.sourceEvent.pageX - 50);
container.attr('transform', 'translate(' + x + ')');
wasDragged = true;
}
function onDragEnd() {
if (wasDragged === true) {
console.log('onDragEnd');
// always do this on drag end
flashRect();
}
wasDragged = false;
}
function onClick(d) {
if (d3.event.defaultPrevented === false) {
console.log('onClick');
// only do this on click if we didn't just finish dragging
flashRect();
}
}
但是,此示例的行為方式與chrome和Firefox不同。 當我單擊矩形時:
當我拖放矩形時:
單擊時,有什么方法可以使chrome與Firefox具有相同的行為?
container
.call(dragBehavior)
.on('click', onClick);
至
container
.on("mousedown", function() {
d3.event.stopPropagation();
d3.select(this).on("mouseup", onClick);
d3.select(this).on("mousemove", function()
{
d3.select(this).call(dragBehavior);
});
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.