js to achieve simple image drag effect

This article shares the specific code of js to achieve simple image drag effect for your reference. The specific content is as follows

//Pictures need to be imported by yourself<!doctype html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>Realize the small square that cannot be clicked in the current display area</title>
 <style>
 div{position:fixed;width:100px;height:100px;
  background-image:url(images/xiaoxin.gif);
   background-size:100%;
 }
 </style>
 
 </head>
 <body>
 <div id="pop"></div>
 <script>
 let pop = document.getElementById("pop")
 //Define a switch variable to control whether the image follows the mouse movement let canMove = false;
 //When starting to drag, save the relative position of the mouse from the upper left corner of the div let offsetX,offsetY;
 //When the mouse is pressed on pop, pop.onmousedown=function(e){
  //You can start dragging canMove=true;
  offsetX=e.offsetX;
  offsetY=e.offsetY;
 }
 //When the mouse moves in the window window.onmousemove=function(e){
  //Only when pop can move if(canMove==true){
  //Let pop follow the mouse movement //When you start dragging, immediately get the relative position of the mouse to the upper left corner of the image //Find the top and left of pop
  let left=e.clientX-offsetX;
  let top=e.clientY-offsetY;
  //Set the top and left attributes of pop pop.style.left=left+"px";
   pop.style.top=top+"px";
  }
 }
 //When the mouse button is lifted on pop, pop.onmouseup=function(){
  //Stop dragging canMove=false
 } 
 </script>
 </body>
</html>

Effect picture:

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

Native JS to achieve drag and drop image effect
js implements the method of switching pictures by dragging the mouse
JS method to zoom in, zoom out and drag pictures [compatible with IE and Firefox]
JS HTML5 drag and drop upload image preview
Example of using JavaScript to zoom in and out and drag and drop images
js to achieve drag and drop upload picture function
js to achieve picture enlargement and drag special effects code sharing
JS implements simple image drag and drop sorting example code
js css3 realizes the image drag effect
Problems with javascript web page editing box and dragging images

<<: MySQL column to row conversion tips (share)

>>: Detailed explanation of nginx reverse proxy webSocket configuration