js拖动图片

<html>
  <head>
    <meta name="referrer" content="no-referrer">
  </head>
  <body>
	<div class="left">
	<img src="https://pic.cnblogs.com/avatar/1549846/20191126100502.png" 
		  alt="加载失败" class="ico"/>
	</div>
	<div class="content">content</div>
  </body>
<script type="text/javascript">
	const draggable = document.querySelector('.ico');
	draggable.addEventListener('dragstart', ondragstart);
	draggable.addEventListener('dragend', ondragend);

	const droppable = document.querySelector('.content');
    droppable.addEventListener('dragenter', ondragenter);
	droppable.addEventListener('dragover', ondragover);
    droppable.addEventListener('dragleave', ondragleave);
    droppable.addEventListener('drop', ondrop);
	
	let toDrag = false;
    function ondragstart(e){
      console.log('ondragstart');
	  toDrag = true;
    }
	
    function ondragend(e) {
      console.log('ondragend');
	  toDrag = false;
    }

	function ondragenter(e) {
	  e.preventDefault();
	}
	
	function ondragover(e) {
	  e.preventDefault();
	}

	function ondragleave(e) {
      console.log('ondragleave');	
	}

	function ondrop(e) {
	  if(!toDrag){
	    return;
	  }
      console.log('ondrop');
	  let newImg = document.createElement("img");
	  newImg.src = draggable.src;
	  newImg.style.position = "absolute";
	  newImg.style.left = e.offsetX;
	  newImg.style.top = e.offsetY;
	  newImg.draggable = "false";
	  droppable.append(newImg);
	}
</script>
<style type="text/css">
.left {
	position: absolute;
	left: 0;
	width: 15%;
	height: 100%;
	background: #aaa;
}
.content {
	position: absolute;
	left: 15%;
	width: 75%;
	height: 100%;
	background: #a0a;
}
</style>
</html>
评论
