拖放Html5從兩側

我正在創建一個應用程序，我正在實施Html5拖放功能，它的工作正常。現在它是一個應用程序，在這種情況下，可能會丟棄項目，我想再次拖動元素並放到上一個位置。我在這裏看到一個例子http://ashishware.com/MochikitDnD.shtml，但它的樣本使用MochiKit.js，我不想要任何外部插件/ js。請爲我提供相同的示例或代碼。我拖放代碼如下所示：拖放Html5從兩側

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)); 
    }

和HTML看起來像

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

<div id="drag1" draggable="true" ondragstart="drag(event)" ondragover="allowDrop(event)"></div>

感謝提前:)

來源

2012-07-10 Haseeb Akhtar

JavaScript應該可以正常拖拽向前和向後。請發佈您的標記以及您如何附加這些事件處理程序的詳細信息。 – robertc 2012-07-10 11:43:09

@robertc，我已經從html div標記添加了我的方法調用。 – 2012-07-10 12:12:30

你試圖將它拖回到元素的'allowDrop'上嗎？ – robertc 2012-07-10 14:09:55

對於你能夠拖動的東西「回」你需要的地方拖東西收回來，像這樣：

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 
<div id="div2"ondrop="drop(event)" ondragover="allowDrop(event)"> 
    <div id="drag1" draggable="true" ondragstart="drag(event)"></div> 
</div>

除此之外，your code works（在Chrome中，網絡連接我測試過的refox和Opera）。

來源

2012-07-11 07:52:10 robertc

拖放Html5從兩側

回答

相關問題