拖放和克隆div元素

Question

嗨我有一些JavaScript在這裏我想實現拖放功能。所以，如果我點擊一個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);