드래그 앤 드롭 및 복제 div 요소

Question

안녕하세요, 여기에 드래그 앤 드롭 기능을 구현하려는 일부 자바 스크립트가 있습니다. div 요소를 클릭하여 드래그하면 원래 div가 그대로 유지되도록 복제본을 대신 드래그합니다. 내가, 드래그 작품을 대상을 복제하지 않는 경우

다음은 내 스크립트

var _startX = 0;    
var _startY = 0; 
var _offsetX = 0;   
var _offsetY = 0; 
var _dragElement;   
var _oldZIndex = 0;   
var _debug = $('.drag');  
var target1,target; 

function ExtractNumber(value) 
{ 
    var n = parseInt(value); 
    return n == null || isNaN(n) ? 0 : n; 
} 

// this is simply a shortcut for the eyes and fingers 
function $(id) 
{ 
    return document.getElementById(id); 
} 

InitDragDrop(); 

function InitDragDrop() 
{ 
    document.onmousedown = OnMouseDown; 
    document.onmouseup = OnMouseUp; 
} 

function OnMouseDown(e) 
{ 
    if (e == null) 
     e = window.event; 

    target = e.target != null ? e.target : e.srcElement; 

    if (target.className == 'drag') 
    { 
     _startX = e.clientX; 
     _startY = e.clientY; 

     target1 = target.cloneNode(true); 

     // grab the clicked element's position 
     _offsetX = ExtractNumber(target1.style.left); 
     _offsetY = ExtractNumber(target1.style.top); 

     // bring the clicked element to the front while it is being dragged 
     _oldZIndex = target1.style.zIndex; 
     target1.style.zIndex = 10000; 

     // we need to access the element in OnMouseMove 
     _dragElement = target1; 

     // tell our code to start moving the element with the mouse 
     document.onmousemove = OnMouseMove; 
    } 
} 

function OnMouseMove(e) 
{ 
    if (e == null) 
     var e = window.event; 

    // this is the actual "drag code" 
    _dragElement.style.left = (_offsetX + e.clientX - _startX) + 'px'; 
    _dragElement.style.top = (_offsetY + e.clientY - _startY) + 'px'; 
} 

function OnMouseUp(e) 
{ 
    if (_dragElement != null) 
    { 
     _dragElement.style.zIndex = _oldZIndex; 
     document.onmousemove = null; 
     _dragElement.ondragstart = null;  
     _dragElement = null; 
    } 
} 

입니다. 복제 한 경우 끌기가 작동하지 않습니다. 왜 이런 일이 일어나는 지 아십니까?

Answer 1

복제본을 DOM에 추가하지 마십시오. cloneNode 후, 컨테이너에 추가 예컨대 필요 :

target1 = target.cloneNode(true); 
target.parentNode.appendChild(target1);