拖放 - Javascript

我一直試圖讓我的拖放工作，無法弄清楚它有什麼問題。拖放 - Javascript

我基本上不能將圖像放到身體圖像。

我試過JSLint/JSHint來清理我的代碼，但是這並沒有幫我讓它工作。

有人可以幫我嗎？

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Drag and Drop</title> 
     <style> 
      div#OuterDiv { 
       border: 1px solid black; 
       position: relative; 
       width: 1000px; 
       height: 1000px; 
       background-color: gray; 
       color: white; 
       font: times new roman; 
      } 
     </style> 
    </head> 

    <body> 
     <script language="text/javascript"> 
      'use strict'; 
      var ie4 = ua.indexOf("MSIE 4.0"); 

      var curElement; 
      window.onload = opening; 
      document.ondragstart = doDragStart; 
      document.onmousedown = doMouseDown; 
      document.onmousemove = doMouseMove; 
      document.onmouseup = new Function("curElement=null"); 


      function opening() { 
       if (ie4Final) { 
        if (body.style.display === "none") { 
         OuterDiv.filters[0].Apply(); 
         body.style.display = ""; 
         OuterDiv.filters[0].Play(); 
        } 
       } else { 
        if (betaVer >= 2) { 
         body.style.display = ""; 
        } 
       } 
      } 

      function doMouseMove() { 
       var newleft = 0, 
        newTop = 0; 
       if ((event.button === 1) && (curElement !== null)) { 
        newleft = window.event.x - tx; 
        if (newleft < 0) { 
         newleft = 0; 
         if (newleft + curElement.width > document.all.OuterDiv.offsetWidth) newleft = document.all.OuterDiv.offsetWidth - curElement.offsetWidth; 
         curElement.style.pixelLeft = newleft; 
         newtop = event.clientY - document.all.OuterDiv.offsetTop - (curElement.offsetHeight/2); 
         if (newtop < 0) { 
          newtop = 0; 
          if (newtop + curElement.height > document.all.OuterDiv.offsetHeight) newtop = window.event.y - ty; 
          curElement.style.pixelTop = newtop; 
          event.returnValue = false; 
          event.cancelBubble = true; 
         } 
        } 

        function doDragStart() { 
         if ("IMG" === event.srcElement.tagName) { 
          event.returnValue = false; 
         } 
        } 


        function doMouseDown() { 
         if ((event.button === 1) && (event.srcElement.tagName === "img")) { 
          tx = window.event.x - event.srcElement.style.pixelLeft; 
          ty = window.event.y - event.srcElement.style.pixelTop; 
          curElement = event.srcElement; 
         } 
        } 
     </script> 
     <script FOR="body" event="onMouseDown"> 
      event.cancelBubble = true; 
     </script> 
     <div id="OuterDiv"> 
      <h1><Center>Drag and Drop - potato head</center></h1> 

      <img ID="body" style="position:absolute;left:10;top:190;z-index:19;" src="BODY.GIF" /> 
      <img ID="ear1" style="position:absolute;left:60;top:70;z-index:19;" src="EAR1.GIF" /> 
      <img ID="ear2" style="position:absolute;left120;top:70;z-index:19;" src="EAR2.GIF"> 
      <img ID="glasses4" style="position:absolute;left:120;top:70;z-index:19;" src="GLASSES4.GIF" /> 
      <img ID="mouth1" style="position:absolute;left:290;top:70;z-index:19;" src="MOUTH1.GIF" /> 
      <img ID="nose1" style="position:absolute;left:450;top:70;z-index:19;" src="NOSE1.GIF" /> 
      <img ID="eyes4" style="position:absolute;left:510;top:70;z-index:19;" src="EYES4.GIF" /> 
     </div> 
    </body> 

</html>

來源

2015-05-03 aiee

在我看來，像你試圖做到這一點：http://www.w3schools.com/html/ html5_draganddrop.asp 我錯了嗎？ – odedta

不，你說得對，那就是我想要做的 – aiee

那麼，那麼這是一個很好的解決方案嗎？它看起來比所有代碼簡單得多，並且受到所有主流瀏覽器的支持。 – odedta

你可以試試下面的代碼：

function ondrop(ev){ 
 
    var FieldClone=document.getElementByID("textField").clone(true); 
 
    ev.target.appendChild(FieldClone); 
 
}

<input type="text" id="textField" value="Drop me" name="" draggable="true"> 
 
    <div id="sec_drop" ondrop="drop(event)"style="width: 500px;height: 370px;"ondragover="allowDrop(event)"> 
 
</div>

來源

2016-02-21 14:53:32

拖放 - Javascript

回答

相關問題