拖放：我如何使圖像回到原始位置？

HTML & JS：

<!DOCTYPE HTML> 
<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)); 
} 
</script> 

<body> 

    <div id="bracelet"> 

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 

    </div> 

    <br/><br/><br/><br/><br/> 

<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"> 
<img id="drag1" src= "http://upload.wikimedia.org/wikipedia/commons/4/4f/Button-Red.svg" draggable="true" ondragstart="drag(event)" width="50" height="50"> 
</div> 

    <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"> 
<img id="drag2" src= "http://upload.wikimedia.org/wikipedia/commons/a/a8/Button-Blue.svg" draggable="true" ondragstart="drag(event)" width="50" height="50"> 
</div> 

     <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"> 
<img id="drag3" src= "http://upload.wikimedia.org/wikipedia/commons/c/ca/Button-Lightblue.svg" draggable="true" ondragstart="drag(event)" width="50" height="50"> 
</div> 

      <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"> 
<img id="drag4" src= "http://upload.wikimedia.org/wikipedia/commons/b/ba/Button-Purple.svg" draggable="true" ondragstart="drag(event)" width="50" height="50"> 
</div> 

       <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"> 
<img id="drag5" src= "http://upload.wikimedia.org/wikipedia/commons/6/68/Button-Orange.svg" draggable="true" ondragstart="drag(event)" width="50" height="50"> 
</div> 

        <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"> 
<img id="drag6" src= "http://upload.wikimedia.org/wikipedia/commons/d/dc/Button-Green.svg" draggable="true" ondragstart="drag(event)" width="50" height="50"> 
</div> 

         <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"> 
<img id="drag7" src= "http://upload.wikimedia.org/wikipedia/commons/4/4f/Button-Red.svg" draggable="true" ondragstart="drag(event)" width="50" height="50"> 
</div> 

    <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"> 
<img id="drag8" src= "http://upload.wikimedia.org/wikipedia/commons/a/a8/Button-Blue.svg" draggable="true" ondragstart="drag(event)" width="50" height="50"> 
</div> 

     <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"> 
<img id="drag9" src= "http://upload.wikimedia.org/wikipedia/commons/c/ca/Button-Lightblue.svg" draggable="true" ondragstart="drag(event)" width="50" height="50"> 
</div> 

      <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"> 
<img id="drag10" src= "http://upload.wikimedia.org/wikipedia/commons/b/ba/Button-Purple.svg" draggable="true" ondragstart="drag(event)" width="50" height="50"> 
</div> 

       <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"> 
<img id="drag11" src= "http://upload.wikimedia.org/wikipedia/commons/6/68/Button-Orange.svg" draggable="true" ondragstart="drag(event)" width="50" height="50"> 
</div> 

        <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"> 
<img id="drag12" src= "http://upload.wikimedia.org/wikipedia/commons/d/dc/Button-Green.svg" draggable="true" ondragstart="drag(event)" width="50" height="50"> 
</div>

CSS：

#div1 { 
    width:50px; 
    height:50px; 
    padding:10px; 
    border:1px solid #aaaaaa; 
    display: inline; 
    float: left; 
    margin-bottom: 25px; 
    margin-left: 50px 
} 

#div2 { 
    width:50px; 
    height:50px; 
    padding:10px; 
    border:1px solid #aaaaaa; 
    display: inline; 
    float: left; 
} 

#bracelet { 
    width:420px; 
    height:75px; 
    padding: 10px; 
    margin-left: 30px; 
    border:1px solid #aaaaaa; 
    background-color: gray; 
}

什麼我想完成就是能夠將圖像移動到放置點上，然後將其放置在其他任何地方並使其返回n到原來的位置。目前它只能放在指定的div上，但我希望它能夠在任何地方丟棄，以返回原來的位置。

任何幫助表示讚賞。

來源

2013-09-23 John Smith

（與問題無關）在同一個文檔中，不應該有兩個元素具有相同的'id'。 –

通過使用dragend事件，您可以確定元素是否掉落在可放置元素的外部。

<img ... draggable="true" ondragend="dragEnd(event)" ondragstart="drag(event)">

function dragEnd(ev){ 
    if(ev.dataTransfer.dropEffect == "none"){ 

     // REVERT BACK TO ORIGINAL POSITION 

    } 
}

然後你必須決定要如何指定什麼是「原位置」了。您可能會考慮將原始父級的id存儲在data-屬性中，然後讀取該屬性並將其追加回該父級。另一個選項可能是在初始頁面加載時甚至在第一個dragstart上通過javascript填充這些data-屬性。

編輯：工作示例：

http://jsfiddle.net/6xRXj/3/

你會發現我不得不消除您複製id S作爲他們必須是唯一的。

function drag(ev) { 
    var el = ev.target; 
    var parent = el.getAttribute("data-parent"); 

    // if the parent data attribute is not yet set, set it to current parent 
    if(!parent){ 
     el.setAttribute("data-parent", el.parentNode.id); 
    } 

    ev.dataTransfer.setData("Text", el.id); 
} 

function dragEnd(ev){ 
    if(ev.dataTransfer.dropEffect == "none"){ 

     // get parent from data attribute 
     var parent = document.getElementById(ev.target.getAttribute("data-parent")); 

     // append back to the original parent    
     parent.appendChild(ev.target); 
    } 
}

來源

2013-09-23 20:56:09

不能要求更好。謝謝一堆！ –

拖放：我如何使圖像回到原始位置？

回答

相關問題