2015-04-02 106 views
0

目前我通過在dragMove功能在dragStart功能使用element.clone()和移動克隆拖動可拖動聖拉斐爾元件的克隆(在dragStop函數移除)。聖拉斐爾拖動克隆onDragOver

這對可拖動元素的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); 

回答

0

在它睡了一夜後,我改變了克隆自身的方法,通過拖動原,並設置在其位置上的克隆。因此我保持原來的位置,並且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);