jQuery implements the mouse drag image function

jQuery implements the mouse drag image function

This example uses jQuery to implement a mouse drag image function.

First, set up a wrapper. The coordinates in the wrapper are the coordinates of the image movement.

 #wrapper{
      width: 1000px;
      height:1000px;
      position:relative;
    }

Set the image div, which is the div to be dragged

#div1{
      position: absolute;
      left:0px;
      top:0px;
      width: 300px;
      height: 200px;
      background: url("d:/Pictures/Earth.jpg");
      background-size:contain;
    }

The above sets the positioning of wrapper to relative and div1 to absolute.

Next, design the dragging algorithm:

The idea is as follows:

1. Let the div follow the mouse when the mouse is clicked

2. Stop following when the mouse is released

First, we need a function that will change the coordinates of the div to the current mouse position:

First, you need to define several variables to save the current mouse coordinates and the image coordinates.

  var timer;
      var mouseX=0;
      var mouseY=0;
      var pic_width = parseInt($("#div1").css("width")); 
      var pic_height = parseInt($("#div1").css("height"));

Now we need to add an event listener to the wrapper. When the mouse moves in the wrapper, modify the values ​​of the variables mousex and mousey.

$("#wrapper").mousemove(function(e){
        mouseX = e.clientX;
        mouseY = e.clientY;
      });

Write a follow function and call it with a timer

$("#div1").mousedown(function(){
        timer=setInterval(follow,10);
      });
      $("#div1").mouseup(function(){
        clearInterval(timer);
      });
      var follow = function(){

        $("#div1").css("left",mouseX-pic_width/2);
        $("#div1").css("top",mouseY-pic_height/2);
      };

The complete code is as follows:

<!doctype html>
<html>
  <head>
    <script type = "text/javascript" src = "jquery.js"></script>
    <style type = "text/css">
    #wrapper{
      width: 1000px;
      height:1000px;
      position: relative;
      background: linear-gradient(lightblue,white);
      font-size: 40px;
    }
    #div1{
      position: absolute;
      left:0px;
      top:0px;
      width: 300px;
      height: 200px;
      background: url("d:/Pictures/Earth.jpg");
      background-size:contain;
    }
    </style>
  </head>
  <body>
    <div id = "wrapper">
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Impedit numquam accusamus explicabo praesentium laudantium et accusantium, ab ipsum, excepturi necessitatibus quos iste ad qui deleniti sed debitis reiciendis quam nisi.
      <div id = "div1">

      </div>
    </div>
    
    
    <script>
      
      var timer;
      var mouseX=0;
      var mouseY=0;
      var pic_width = parseInt($("#div1").css("width")); 
      var pic_height = parseInt($("#div1").css("height")); 

      
      $("#wrapper").mousemove(function(e){
        mouseX = e.clientX;
        mouseY = e.clientY;
      });

      $("#div1").mousedown(function(){
        timer=setInterval(follow,10);
      });
      $("#div1").mouseup(function(){
        clearInterval(timer);
      });
      var follow = function(){

        $("#div1").css("left",mouseX-pic_width/2);
        $("#div1").css("top",mouseY-pic_height/2);
      };
    </script>
  </body>
</html>

Final result:

This is the end of this article about how to use jQuery to drag images with the mouse. For more information about how to use jQuery to drag images with the mouse, please search previous articles on 123WORDPRESS.COM or continue browsing the following related articles. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • Example of mouse dragging floating layer function implemented by jQuery [Drag div and any other tags]
  • jQuery implements mouse dragging to adjust table column width
  • jQuery implements mouse dragging to sort Li or Table
  • jQuery to achieve the mouse drag picture effect sample code
  • Jquery writes a mouse drag effect implementation principle and code
  • Mouse drag effect code based on jQuery

<<:  Several common ways to deploy Tomcat projects [tested]

>>:  In-depth understanding of MySQL self-connection and join association

Recommend

Advanced explanation of javascript functions

Table of contents Function definition method Func...

Summary of 6 skills needed to master web page production

It has to be said that a web designer is a general...

Implementation of Vue package size optimization (from 1.72M to 94K)

1. Background I recently made a website, uidea, w...

How to install Nginx in Docker

Install Nginx on Docker Nginx is a high-performan...

How to use LibreOffice to convert document formats under CentOS

Project requirements require some preprocessing o...

WeChat Mini Program to Implement Electronic Signature

This article shares the specific code for impleme...

Detailed explanation of the rounding accuracy problem of the toFixed() method in JS

Table of contents The pitfalls Filling method Wha...

18 Web Usability Principles You Need to Know

You can have the best visual design skills in the...

What to do if you forget your password in MySQL 5.7.17

1. Add skip-grant-tables to the my.ini file and r...

Mini Program to Implement Sieve Lottery

This article example shares the specific code of ...

Independent implementation of nginx container configuration file

Create a container [root@server1 ~]# docker run -...

The top fixed div can be set to a semi-transparent effect

Copy code The code is as follows: <!DOCTYPE ht...

Summary of common MySQL commands

Set change mysqlroot password Enter the MySQL dat...

JavaScript to implement click to switch verification code and verification

This article shares the specific code of JavaScri...

Detailed explanation of encoding issues during MySQL command line operations

1. Check the MySQL database encoding mysql -u use...