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

iframe parameters with instructions and examples

<iframe src=”test.jsp” width=”100″ height=”50″...

Nginx domain name SSL certificate configuration (website http upgraded to https)

Preface HTTP and HTTPS In our daily life, common ...

Beginners learn some HTML tags (3)

Beginners who are exposed to HTML learn some HTML...

How to implement Hover drop-down menu with CSS

As usual, today I will talk about a very practica...

Disable IE Image Toolbar

I just tried it on IE6, and it does show the toolb...

Common problems in implementing the progress bar function of vue Nprogress

NProgress is the progress bar that appears at the...

jQuery plugin to achieve image suspension

This article shares the specific code of the jQue...

Detailed explanation of mysql filtering replication ideas

Table of contents mysql filtered replication Impl...

How to change the Ali source in Ubuntu 20.04

Note that this article does not simply teach you ...

Solution to index failure caused by MySQL implicit type conversion

Table of contents question Reproduction Implicit ...

The solution to the page not refreshing after the route changes after react jumps

Table of contents question Solution question Ther...

Detailed explanation of nginx anti-hotlink and anti-crawler configuration

Create a new configuration file (for example, go ...

How to quickly insert 10 million records into MySQL

I heard that there is an interview question: How ...

JavaScript realizes the effect of mobile modal box

This article example shares the specific code of ...

After installing MySQL, the root account prompt appears when logging in. mysql ERROR 1045 (28000): Access denied for use solution

After installing MySQL, you will find that the ro...