Question

将对象拖动到'div1'时，我无法移动它。因此需要从给定图像中获取克隆然后将其拖放到框架中并将该图像移动到框架内的任何位置。

<!DOCTYPE HTML>      
<html>        
  <head>
    <style>
      #div1 { 
        width:700px;
        height:500px;
        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).cloneNode(true));
      }
    </script> 
  </head>
  <body>
    <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)" >
    </div>
    <br>
    <img id="drag1" src="img/gates/not_gate.png" draggable="true" ondragstart="drag(event)" width="10%" >

    <img id="drag2" src="img/gates/or_gate.png" draggable="true" ondragstart="drag(event)" width="10%" >

    <img id="drag3" src="img/gates/and_gate.png" draggable="true" ondragstart="drag(event)" width="10%" >

    <img id="drag4" src="img/gates/nor_gate.png" draggable="true" ondragstart="drag(event)" width="10%" >
  </body>
</html>

拖放然后移动对象/图像

0 个答案: