Question

当共享坐标的多个元素分配了拖动条时，＆＃34; dragstart＆＃34;在鼠标下的所有元素上调用事件，但是＆＃34;拖动＆＃34;和＆＃34; dragend＆＃34;只会为其中一个调用。

检查控制台输出： http://jsfiddle.net/AsherBarak/np7g10be/

这是设计的吗？如果我需要对碰巧堆叠的不同元素进行不同的拖拽会怎么样？

var dragGroup = d3.behavior.drag()
    .on('dragstart', function () {
    console.log('Start Dragging Group');
})
    .on('drag', function (d, i) {
    console.log('Dragging Group');
})
    .on('dragend', function (d, i) {
    console.log('Ended Dragging Group');
});

var dragCircle = d3.behavior.drag()
    .on('dragstart', function () {
    console.log('Start Dragging Circle');
})
    .on('drag', function (d, i) {
    console.log('Dragging Circle');
})
    .on('dragend', function (d, i) {
    console.log('Ended Dragging circle');
});

var svg = d3.select('body').append('svg').attr('viewBox', '-50 -50 300 300');
var g = svg.selectAll('g').data([{
    x: 10,
    y: 10
}])
    .enter().append('g').call(dragGroup);

g.append('rect').attr('width', 100).attr('height', 100);

g.selectAll('circle').data([{
    cx: 90,
    cy: 80
}]).enter()
    .append('circle')
    .attr('cx', function (d) {
    return d.cx
})
    .attr('cy', function (d) {
    return d.cy
})
    .attr('r', 30)
.call(dragCircle);

Answer 1

在dragstart圈事件中停止sourceEvent传播将解决此问题。

stopPropagation方法可防止事件冒泡DOM 树，防止任何父处理程序被通知事件。

var dragCircle = d3.behavior.drag()
    .on('dragstart', function() {
        d3.event.sourceEvent.stopPropagation();
        console.log('Start Dragging Circle');
    })
    .on('drag', function(d, i) {
        console.log('Dragging Circle');
    });

＆＃13;

var dragGroup = d3.behavior.drag()
    .on('dragstart', function() {
        console.log('Start Dragging Group');
    })
    .on('drag', function(d, i) {
        console.log('Dragging Group');
    });

var dragCircle = d3.behavior.drag()
    .on('dragstart', function() {
        d3.event.sourceEvent.stopPropagation();
        console.log('Start Dragging Circle');
    })
    .on('drag', function(d, i) {
console.log('Dragging Circle');
    });

var svg = d3.select('body').append('svg').attr('viewBox', '-50 -50 300 300');
var g = svg.selectAll('g').data([{x:10,y:10}])
    .enter().append('g').call(dragGroup);

g.append('rect').attr('width', 100).attr('height', 100);

g.selectAll('circle').data([{cx: 90,cy:80}]).enter()
    .append('circle')
        .attr('cx', function(d){ return d.cx })
        .attr('cy', function(d){ return d.cy })
        .attr('r', 30)
        .call(dragCircle);

＆＃13;

circle{
  fill: red;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

＆＃13;

当元素在彼此之上时d3拖动

1 个答案: