Javascript drag and drop prototype

This article mainly introduces the prototype of Javascript drag and drop (analyzing the code line by line, allowing you to easily understand the principle of drag and drop). Friends in need can refer to the

principle of drag and drop: In fact, it is the mouse and The distance from the top left corner remains the same. Let’s look at the picture below:

This red dot is the mouse.

Drag-drag actually means calculating the position of an object through the position of the mouse. It’s that simple and it’s so willful. So how do you find this distance? ?

The difference between the mouse position and the object position is the distance, right? Then this diagonal line is composed of horizontal lines and vertical lines.

Let’s take a look at how to do the program.

<p id="p1"></p>

In fact, what he changed was the left top of a certain p, and then he started to move. There must be absolute positioning in that method, right?

<style type="text/css">
      #p1 {
        width: 200px;
        height: 200px;
        background: red;
        position: absolute;
      }
    </style>

There are several steps here, 1. Mouse down 2. Mouse up 3. Mouse movement

<script type="text/javascript">
   window.onload = function() {
    var op = document.getElementById("p1");
    var disX = 0;
    var disY = 0;
    op.onmousedown = function(ev) {
     var oEvent = ev || event; // 浏览器兼容
     disX = oEvent.clientX - op.offsetLeft; // 横向的位置就是鼠标的位置-p的位置
     disY = oEvent.clientY - op.offsetTop;
    };

    op.onmousemove = function(ev) {
      var oEvent = ev || event;
      op.style.left = oEvent.clientX - disX+&#39;px&#39;; // 当前鼠标的位置-disX
      op.style.top = oEvent.clientY - disY+&#39;px&#39;;
     };
   };
  </script>

Look at the picture and talk:

var opLeft = oEvent.clientX - disX;

The picture shows it very clearly

mouseup Let’s not take a look at the effect now. .

You will find a very interesting phenomenon. The mouse will follow me even if I don’t click it. Why is this? ? ?

Let’s take a look at mousemove: No one in Javascript stipulates that the mouse must be pressed before starting, right? Regardless of whether you press the mouse or not, this mousemove keeps happening, so the problem comes from here. Before the mouse is pressed down, there should be no response when the mouse is moved over it. It will only respond when the mouse is pressed down.

So, this mousemove should not be added as soon as it comes up, but wait until the mouse is pressed before adding mousemove. Let’s take a look at the modified code.

Add mouseup by the way, and then its role will be reflected. The function is op.onmousemove = null; remove the move event,

Otherwise, when you lift the mouse, the object will still follow you. op.onmouseup = null; Without leaving garbage, raising the mouse is useless.

Let’s take a look at the modified code:

<script type="text/javascript">
   window.onload = function() {
    var op = document.getElementById("p1");
    var disX = 0;
    var disY = 0;
    op.onmousedown = function(ev) {
     var oEvent = ev || event; // 浏览器兼容
     disX = oEvent.clientX - op.offsetLeft; // 横向的位置就是鼠标的位置-p的位置
     disY = oEvent.clientY - op.offsetTop;

     op.onmousemove = function(ev) {
      var oEvent = ev || event;
      op.style.left = oEvent.clientX - disX+&#39;px&#39;; // 当前鼠标的位置-disX
      op.style.top = oEvent.clientY - disY+&#39;px&#39;;
     };
     op.onmouseup = function() {
      op.onmousemove = null;
      op.onmouseup = null; // 不留垃圾,鼠标抬起本来也就没有用了
     };

    };

   };
  </script>

Now we have made a simple Drag it out. Of course, there are still some small problems that need to be solved.

But no matter what, we already have a prototype of drag and drop.

The above is the entire content of this chapter. For more related tutorials, please visit JavaScript Video Tutorial!