如何让拖放框重置位置？

之前，我从这里开始是的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

如何让拖放框重置位置？

回答

相关问题