Some problems in the prototype of Javascript drag and drop (analyzing the code line by line, allowing you to easily understand the principles of drag and drop)_javascript skills

Today we will solve some problems in the last drag prototype. What are the problems below?

Attached is the Javascript code from the previous issue for everyone to check the problem.

<script type="text/javascript">
   window.onload = function() {
    var oDiv = document.getElementById("div1");
    var disX = 0;
    var disY = 0;
    oDiv.onmousedown = function(ev) {
     var oEvent = ev || event; 
     disX = oEvent.clientX - oDiv.offsetLeft; 
     disY = oEvent.clientY - oDiv.offsetTop;

     oDiv.onmousemove = function(ev) {
      var oEvent = ev || event;
      oDiv.style.left = oEvent.clientX - disX+'px'; 
      oDiv.style.top = oEvent.clientY - disY+'px';
     };
     oDiv.onmouseup = function() {
      oDiv.onmousemove = null;
      oDiv.onmouseup = null;
     };

    };

   };
  </script>

1. If I move the mouse faster during the current drag, you will find that the mouse comes out of the div, and the div will not follow the mouse at this time.

Then why does this problem occur?

The reason is actually very simple. We add the mousemove event to the div, so once the mouse leaves the div, the mousemove will no longer be triggered at this time.

Solution: The event is loaded on the document. Because your mouse is still in the page no matter what, mousemove will be triggered no matter what. This way, it can be moved quickly without any problem.

Then we modify the code accordingly.

<script type="text/javascript">
   window.onload = function() {
    var oDiv = document.getElementById("div1");
    var disX = 0;
    var disY = 0;
    oDiv.onmousedown = function(ev) {
     var oEvent = ev || event; 
     disX = oEvent.clientX - oDiv.offsetLeft; 
     disY = oEvent.clientY - oDiv.offsetTop;
    // 事件加载document 上
     document.onmousemove = function(ev) {
      var oEvent = ev || event;
      oDiv.style.left = oEvent.clientX - disX+'px';
      oDiv.style.top = oEvent.clientY - disY+'px';
     };
     oDiv.onmouseup = function() {
      document.onmousemove = null;
      oDiv.onmouseup = null; 
     };

    };

   };
  </script>

Then this problem can be solved.

2. Let’s see if there are any problems now. Although the problem of dragging quickly is solved, when I move the mouse to this position

Now you can clearly see that the mouse is not on the div. If you lift the mouse at this time, you can see that it will still move after coming back. This is another bug!

Actually, this problem is the same as the one above. So the solution is very simple. Let’s add mouseup to the document. Let’s try it out

document.onmouseup = function() { 
      document.onmousemove = null; 
      document.onmouseup = null; 
     };

In this way, if you move to the position just now, the previous bug will not appear, and there will be no problem if you move fast. Everything is normal.

3. Let’s look at browser compatibility issues

In fact, there is such a problem in lower versions of Firefox
. How does it appear? When you drag it for the first time, it is correct. When you drag it once, hold down and move, and you will find that there will be this shadow behind it. What's going on?

Actually, what we are dragging is an empty div. Firefox has a bug, so what if we add some content to the div

You will find that now there is no problem again.

So the Firefox bug only appears in empty divs.

Solution:

It’s actually very simple, we just need to prevent the browser default event return false; in onmousedown. Why add it to onmousedown?

You can think about which event dragging starts from, right? It starts from onmousedown. Dragging starts when the mouse is pressed. So it needs to be loaded in onmousedown.

In fact, I just added a return false; to block the Firefox bug.

No matter how much you drag it, there will be no problem.

Attached is the code:

<script type="text/javascript">
   window.onload = function() {
    var oDiv = document.getElementById("div1");
    var disX = 0;
    var disY = 0;
    oDiv.onmousedown = function(ev) {
     var oEvent = ev || event;
     disX = oEvent.clientX - oDiv.offsetLeft;
     disY = oEvent.clientY - oDiv.offsetTop;
     // 事件加载document 上
     document.onmousemove = function(ev) {
      var oEvent = ev || event;
      oDiv.style.left = oEvent.clientX - disX+'px';
      oDiv.style.top = oEvent.clientY - disY+'px';
     };
     document.onmouseup = function() {
      document.onmousemove = null;
      document.onmouseup = null;
     };

     return false;

    };

   };
  </script>

Now the program is complete, but there are still some problems in user experience.

For example, the user may drag this div out of the browser, so how to solve it?

Then let’s add a judgment. This is very simple, if you go out from the left

, then it is directly equal to 0, and he will not be able to get out from the left. Then the same goes for the above.

So how to prevent being unable to exit from the right? ? Just draw a picture and it will become clear. In fact, we can calculate it by just subtracting the width of the div from the visible width of the page.

Then this is the so-called maximum value. Just judge if the moving distance exceeds this maximum value, it will be equal to this maximum value. Then it's the same below.

Attached is the complete code:

<script type="text/javascript">
       // 拖拽空div 低版本的火狐有bug
      window.onload = function() {
        var oDiv = document.getElementById("div1");var disX = 0;
        var disY = 0;
        oDiv.onmousedown = function(ev) {
          var oEvent = ev || event;
          disX = oEvent.clientX - oDiv.offsetLeft;
          disY = oEvent.clientY - oDiv.offsetTop;

          document.onmousemove = function(ev) {
            var oEvent = ev || event;
            // 存储div当前的位置
            var oDivLeft = oEvent.clientX - disX;
            var oDivTop = oEvent.clientY - disY;


            // 从左边拖出去了
            if (oDivLeft < 0) {
              oDivLeft = 0;
            } else if (oDivLeft > document.documentElement.clientWidth - oDiv.offsetWidth) {
              oDivLeft = document.documentElement.clientWidth - oDiv.offsetWidth;
            }

            if (oDivTop < 0) {
              oDivTop = 0;
            } else if (oDivTop > document.documentElement.clientHeight - oDiv.offsetHeight) {
              oDivTop = document.documentElement.clientHeight - oDiv.offsetHeight;
            }

            oDiv.style.left = oDivLeft + 'px';
            oDiv.style.top = oDivTop + 'px';
          };

          document.onmouseup = function() {
            document.onmousemove = null;
            document.onmouseup = null;
          };
          return false; // 阻止默认事件,解决火狐的bug
        };
      };
    </script>

Then the drag and drop is now relatively complete. O(∩_∩)O