如何在html 5中創建拖放功能？

堅持做一拖在html5.i下降函數喜IM測試了鍍鉻的代碼，當我嘗試刪除它在該地區在那裏我做它丟棄代碼
它顯示了一個停止標誌的箭頭。我實際上做了一個有邊框的部分框，其中我有一些文字，當我將其中的圖像放入時，我想要改變它。如何在html 5中創建拖放功能？

這是我的js代碼：

function doFirst(){ 
pic = document.getElementById('pic1'); 
pic.addEventListener("dragstart", startDrag , false); 
left = document.getElementById('left1'); 
left.addEventListener("dragenter", function(e){e.preventDefault();}, false); 
left.addEventListener("dragover", function(e){e.preventDefault();} , false); 
left.addEventListener("drop", dropped , false); 
} 

function startDrag(e){ 
    var code = '<img id="pic1" src="D:\tuna\11264353_959682364063264_630153199_n.jpg" />'; 
    e.dataTransfer.setData('hello', code); 
} 

function dropped(e) { 
    e.preventDefault(); 
    left.innerHTML = e.dataTransfer.getData('hello'); 
} 

window.addEventListener("load", doFirst , false);

來源

2015-10-03 varun teja

請添加有關該問題的HTML/CSS。 –

首先，一個忠告：學習如何調試和使用由現代瀏覽器提供了開發人員的工具（特別是控制檯）（或使用Firebug/Web開發擴展，如果你喜歡）。

假如你檢查控制檯，然後你會看到，該代碼拋出一個JS錯誤（「語法錯誤：意外的標記」），你會知道在代碼的錯誤了。特別是，在這條線：

var code = '<img id="pic1" 
src="D:\tuna\11264353_959682364063264_630153199_n.jpg" />';

如果你在網上搜索，你會發現「的JavaScript字符串必須在下一個換行符前終止」（從Andrew Dunn's answer to this question）。而一旦這個錯誤是固定的：

var code = '<img id="pic1" src="D:\tuna\11264353_959682364063264_630153199_n.jpg" />';

你的代碼的其餘部分工作正常，你可以在此看到JSFiddle（我加了真實的URL的圖片，所以你能看到效果的工作）。

來源

2015-10-04 13:08:35

但先生你的代碼，第二行是我在我的js文件和Chrome調試器控制檯顯示行錯誤： –

你什麼錯誤？ –

未捕獲TypeError：無法讀取null的屬性'addEventListener'。 line： 'left.addEventListener（「dragenter」，function（e）{e.preventDefault（）;}，false）;' –

嘗試使用此代碼：

<!DOCTYPE HTML> 
<html> 
    <head> 
     <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 id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 

    <img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69"> 

</body> 
</html>

字體：http://www.w3schools.com/html/html5_draganddrop.asp

來源

2015-10-03 15:52:20 Gtito

所以我的代碼錯了...？ –

如何在html 5中創建拖放功能？

回答

相關問題