動力學拖放

我在互聯網上發現了這段代碼，它在Firefox和Chrome上工作正常，但在IE上無法正常工作。任何機構都可以幫助我。這將非常感激。動力學拖放

我已經完成了幾乎我的項目，但堅持這一個，請幫助我。

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 

     <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame 
     Remove this if you use the .htaccess --> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 

     <title>drag-and-drop</title> 
     <meta name="description" content=""> 
     <meta name="author" content="Suresh"> 

     <meta name="viewport" content="width=device-width; initial-scale=1.0"> 

     <style type="text/css"> 
      #left{height: 500px;padding: 10px;background-color: #ccc;float: left;width: 215px;margin-top: 10px;} 
      #right{height: 500px;padding: 10px;background-color: #ccc;float: right;width: 680px;margin-top: 10px;} 
     </style> 
     <script src="kinetic-v5.0.1.js"></script> 
     <script defer="defer"></script> 
     <script type="text/javascript" src="jquery.js"></script> 
     <script type="text/javascript"> 
      function allowDrop(ev){ 
       ev.preventDefault(); 
      } 

      function drop(ev){ 
       ev.preventDefault(); 
       var data = ev.dataTransfer.getData("Text"); 
       ev.target.appendChild(document.getElementById(data)); 
       //alert("drop"); 
      } 

      function dragStart(ev){ 
       ev.dataTransfer.setData("Text",ev.target.id); 
       //$('#'+ev.target.id).click(); 
       //alert("dragStart"); 
      } 

      function dropcopy(ev){ 
       ev.preventDefault(); 
       var data = ev.dataTransfer.getData("Text"); 
       var copyimg = document.createElement("img"); 
       var original = document.getElementById(data); 
       copyimg.src = original.src; 
       ev.target.appendChild(copyimg); 
       //alert("copy"); 
      } 
     </script> 
    </head> 

    <body> 
     <div id="site_content"> 
      <div id="left" ondrop="drop(event)" ondrag="allowDrop(event)" draggable="true" ondragstart="dragStart(event)"> 
       <ul id="left"> 
        <li><img src="images/template-icon1.png" onclick="javascript: alert('1');" draggable="true" id="drag1" /></li> 
        <li><img src="images/template-icon2.png" draggable="true" id="drag2" /></li> 
        <li><img src="images/template-icon3.png" draggable="true" id="drag3" /></li> 
        <li><img src="images/template-icon4.png" draggable="true" id="drag4" /></li> 
       </ul> 
      </div> 
      <div id="right" draggable="true" ondrop="dropcopy(event)" ondragover="allowDrop(event)">  
      </div> 

      <div id="sidebar_container"> 

      </div> 
     </div> 
    </body> 
</html>

來源

2014-02-22 user1177785

請添加代碼源或的jsfiddle – Maksim

非常感謝，我做的是 – user1177785

嗨馬克西姆，我在http://jsfiddle.net/khantanveeralam/a33Qt/3/添加了這個代碼，但它的一些它不工作呢上jsfiddle.net，所以我已經上傳工作代碼在http://dgbuzz.com/babyshop-explorer/test/drag-and-drop.html – user1177785

嘗試改變ondrag="allowDrop(event)"到ondragover="allowDrop(event)"第一個DIV。還要記住，ID應該是唯一的，這意味着如果您需要多次使用它，那麼每頁只能使用一個ID，然後使用類。

來源

2014-02-24 13:11:10 Maksim

非常感謝，它正在工作:) – user1177785

@ user1177785如果它解決了這個問題，那麼請標記我的回答作爲解決方案，謝謝:) – Maksim

回答

相關問題