Question

目前，我使用element.clone()函数中的dragStart拖动可拖动Raphael元素的克隆，并在dragMove函数中移动克隆（在dragStop中删除它功能）。

这引发了draggable元素的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);

Raphael拖拽克隆onDragOver

1 个答案: