拉斐尔拖动克隆 onDragOver

Question

目前，我通过在 dragStart 函数中使用 element.clone() 并在 dragMove 函数中移动克隆（在 [=14 中删除它）来拖动可拖动 Raphael 元素的克隆=] 函数).

这对可拖动元素的 onDragOver 函数提出了一个问题，因为大多数时候克隆会抛出相应的事件而不是目标事件。

一些代码：

dragStart = function() {
    var s = this, c = s.clone();
    s.data('clone', c);
    c.ox = c.attr('cx'); 
    c.oy = c.attr('cy');
};
dragMove = function(dx, dy) {
    var s = this, c = s.data('clone');
    c.attr({cx:c.ox+dx, cy:c.oy+dy});
};
dragStop = function() {
    this.data('clone').remove();
};
onDragOver = function(el) {
    console.log(el); // displays most of the time the clone  
};
elementToDrag.drag(dragMove, dragStart, dragStop);
elementToDrag.onDragOver(onDragOver);

Answer 1

在它上面睡了一夜之后，我通过拖动原件并在其位置设置一个克隆来改变克隆本身的方法。因此，我保留了原始位置，onDragOver 函数显示了正确的目标元素。

dragStart = function() {
    var s = this, c = s.clone(); // clone stays at the original position
    s.data('clone', c);
    s.ox = s.attr('cx');
    s.oy = s.attr('cy');
};
dragMove = function(dx, dy) {
    var s = this;
    s.attr({cx:s.ox+dx, cy:s.oy+dy}); // but now the original is being dragged
};
dragStop = function() {
    var c = this.data('clone');
    this.attr({cx: c.attr('cx'), cy: c.attr('cy')}); // put original at the position of the clone
    this.data('clone').remove(); // and remove the clone
};
onDragOver = function(el) {
    console.log(el); // now only the targeted element is shown
};
elementToDrag.drag(dragMove, dragStart, dragStop);
elementToDrag.onDragOver(onDragOver);

拉斐尔拖动克隆 onDragOver

Raphael drag clone onDragOver

clone

raphael

drag