来回图片拖放

Posted 2020-10-29 longhua-0

code:

html

<div id="div1"  ondrop="drop(event)"></div>
<div id="div2"  ondrop="drop(event)">
      <img src="777.png" draggable="true"  ondragstart="drag(event)"  id="drag1">
</div>
<div id="div3"  ondrop="drop(event)"></div>

 

javascript:

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>

 效果图：