如何讓拖放框重置位置？

之前，我從這裏開始是的jsfiddle鏈接：http://jsfiddle.net/SSxdB/5/如何讓拖放框重置位置？

，代碼：

<!DOCTYPE HTML> 
<html> 
<head> 
    <meta charset ="utf-8"> 
    <style type="text/css"> 
     #dragBox {width:336px; height:221px; margin:10px;padding:10px;border:1px solid #aaaaaa;} 
    </style> 
    <script> 
    function allowDrop(ev) 
    { 
     ev.preventDefault(); 
    } 

    function drag(ev) 
    { 
     ev.dataTransfer.setData("Text",ev.target.id); 
    } 

    function drop(ev) 
    { 
     ev.preventDefault(); 
     var data=ev.dataTransfer.getData("Text"); 
     ev.target.appendChild(document.getElementById(data)); 

     if (data == "drag1") 
     { 
      foodOne(); 
     } 
     if (data == "drag2") 
     { 
      foodTwo(); 
     } 
    } 

    function foodOne() 
    { 
     alert("You choose Food One"); 
    } 

    function foodTwo() 
    { 
     alert("You choose Food Two"); 
    } 
    </script> 
</head> 
<body bgcolor="#333333"> 
<div div align="center"> 
    <img id="drag1" src="foodOne.jpg" draggable="true" ondragstart="drag(event)" width="336" height="221"> 
    <img id="drag2" src="foodTwo.jpg" draggable="true" ondragstart="drag(event)" width="336" height="221"> 
    <br><br> 
    <div id="dragBox" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 
</div> 
</body> 
</html>

我有兩個圖像（圖像不在的jsfiddle顯示，因爲鏈接是當地的，但你的想法）和一個盒子，我可以拖動它們。問題是，當我將一個圖像拖入圖像不再存在的框中時，並且當我拖動第二張圖像時，它會與下拉框一起摺疊並移出其原始位置。

我試圖讓用戶在圖像中拖動時，該圖像不會從頂部移除，並且當第二個圖像移動時，它也會執行相同的操作，並且放置框始終保留在相同的位置時，圖像被拖入。

如果任何人都可以幫助我，這將是偉大的！

來源

2013-03-01 Nick

尼克，看我更新的答案。 – Raad 2013-03-01 16:12:59

嗯，你有沒有可能想讓兩個圖像都被拖入，但每個圖像只有一個？ – Raad 2013-03-01 16:15:58

好吧，最後更新應該做的訣竅=） – Raad 2013-03-01 16:46:22

您可以使用cloneNode複製圖像節點，並將其附加到圖像框。這樣，原始圖像節點保持不變：

function drop(ev) { 
    ev.preventDefault(); 
    var data = ev.dataTransfer.getData("Text"); 
    var draggedOrNewNodeId = "dragged-"+data; 
    var theNode = document.getElementById(data); 
    var draggedNode = document.getElementById(draggedOrNewNodeId); 
    if (draggedNode != null) { ev.target.removeChild(draggedNode); } 
    var nodeCopy = theNode.cloneNode(true); 
    nodeCopy.id = draggedOrNewNodeId; 
    nodeCopy.setAttribute("class", "dragged"); 
    nodeCopy.setAttribute("draggable", "false") 
    ev.target.appendChild(nodeCopy); 

    if (data == "drag1") { 
     foodOne(); 
    } 
    if (data == "drag2") { 
     foodTwo(); 
    } 
}

見http://jsfiddle.net/raad/SSxdB/15/

測試火狐19.0和Chrome 25.0.1364.97男，都在Windows 7 我沒有看到你的摺疊箱的問題雖然。

編輯

更新的代碼現在克隆被拖動的節點，併爲其分配一個新的ID，其可以被用於去除它，當一個新節點被拖動，加上只允許一個的每個節點，以實例被拖入，並禁用拖動節點上的拖拽（這很容易被移除），以防止進一步拖拽污染容器。

來源

2013-03-01 15:29:00 Raad

這有幫助，但我試圖讓它只有一個圖像顯示在框中時，當我拖動圖像顯示等第二個圖像。 ..現在它附加每一個圖像下降，但我需要它一次只顯示一個圖像。這可能嗎？ – Nick 2013-03-01 15:47:24

每次執行後，我可以將節點設置爲空嗎？ – Nick 2013-03-01 15:59:31

隨着更新它只適用於第一次拖動，但之後，當我拖動任何圖像時沒有任何事情發生。我使用Chrome btw。 – Nick 2013-03-01 16:28:31

如何讓拖放框重置位置？

回答

相關問題