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

How to implement checkbox & radio alignment

Not only do different browsers behave differently...

Application and implementation of data cache mechanism for small programs

Mini Program Data Cache Related Knowledge Data ca...

Is mysql a relational database?

MySQL is a relational database management system....

How to implement the King of Glory matching personnel loading page with CSS3

Those who have played King of Glory should be fam...

How to enter and exit the Docker container

1 Start the Docker service First you need to know...

WeChat Mini Program Lottery Number Generator

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

Detailed explanation of Docker compose orchestration tool

Docker Compose Docker Compose is a tool for defin...

JavaScript to achieve time range effect

This article shares the specific code for JavaScr...

Analysis on how to solve the problem of Navicat Premium connecting to MySQL 8.0 and reporting error "1251"

If people have been idle for too long, they will ...

VUE Getting Started Learning Event Handling

Table of contents 1. Function Binding 2. With par...

A brief discussion on the principle of React two-way data binding

Table of contents What is two-way data binding Im...

Detailed explanation of how Node.js handles ES6 modules

Table of contents 1. Differences between the two ...

Solve the problem of using less in Vue

1. Install less dependency: npm install less less...

The difference between VOLUME and docker -v in Dockerfile

There are obvious differences between volume moun...

Summary of MySQL slow log related knowledge

Table of contents 1. Introduction to Slow Log 2. ...