HTML5拖放段從按鈕

我有以下代碼（略有http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop HTML5拖放段從按鈕

我修改它與<p>元素工作進行修改。

<!DOCTYPE HTML> 
<html> 
<head> 
    <style type="text/css"> 
     .div 
     { 
      width:350px;height:70px;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)); 
     } 
    </script> 
</head> 
<body> 
    <div class="div" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 
    <div class="div" ondrop="drop(event)" ondragover="allowDrop(event)"> 
    <p id="drag1" draggable="true" ondragstart="drag(event)" width="336" height="69">Code</p> 
    <p id="drag2" draggable="true" ondragstart="drag(event)" width="336" height="69">Code</p> 
</div> 
</body> 
</html>

正如你所看到的，基本上有兩個箱子你可以拖動段落。我的問題是，我將如何去拖動一個按鈕的段落？我實際上正在爲這個移動應用程序工作，我想知道我該如何讓它拖動一段按鈕的頁面。任何幫助將不勝感激！

來源

2014-01-20 VCNinc

什麼你的意思是，從一個按鈕的段落？ – Manoj

@Manoj在當前狀態下，您拖動一個段落並將其作爲段落結束。我需要它，以便將一個按鈕拖到頁面上，除了它不是以按鈕形式結束，而是在拖動它時更改爲段落。我希望我很清楚自己想做什麼 - 這很難解釋。 – VCNinc

我不知道有多少延伸我理解你的問題，我想你可以試試下面的代碼

工作DEMO

JS：

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.innerHTML+=" <p>"+document.getElementById(data).innerHTML+"</p>"; 

     }

來源

2014-01-20 14:15:17 Manoj

非常感謝，這正是我需要的。只是改變了一下代碼來使用jQuery，它完美的工作。 – VCNinc

HTML5拖放段從按鈕

回答

相關問題