JavaScript animation Simulation Drag effect Chapter _javascript skill

Look at the implementation diagram first, simulate dragging the final effect and moving the folder on the desktop similar

Principle Introduction

When the mouse is pressed, drag and drop start. When the mouse moves, the drag element is moved with the mouse. When the mouse is lifted, drag the end

So, the point of drag is to determine how the dragged element moves

Suppose that when the mouse is pressed, the clientx and clienty of the mouse object are X1 and x2 respectively. The element distance to the upper-left corner of the viewport is x0 and y0, respectively.

A moment of mouse movement, clientx and clienty respectively for X2 and Y2

So, the x-axis and y-axis distances of the elements are x2-x1 and y2-y1, respectively.

When the element is moved, the position of the element from the upper-left corner of the viewport to the x-axis and y-axis is

 X = x0 + (x2-x1)
 Y = y0 + (y2-y1)

Code implementation

The above principle is implemented in code as follows

When the mouse is pressed, the x0 and y0 of the initial state are used offsetLeft and offsetTop expressed respectively

When the mouse moves, the x and y of the instantaneous state are assigned the left and top of the positioned element respectively.

<div id= "test" style= "height:100px;width:100px;background:pink;position:absolute;top:0;left:0;" ></div>
<script>
test.onmousedown = function (e) {
 e = e | | event;
 Gets the x-axis and y-axis distance of the element distance-locating parent
 var x0 = this.offsetleft;
 var y0 = this.offsettop;
 To obtain the mouse distance from the upper-left corner of the x-axis and the y-axis distance
 var x1 = e.clientx;
 var y1 = e.clienty;

 Test.onmousemove = function (e) {
  e = e | | event;
  Get the X-axis and y-axis distance of the upper-left corner of the viewport at this time
  x2 = e.clientx;
  y2 = e.clienty; 
  Calculate the element at this time should be distance from the upper-left corner of the viewport x-axis and y-axis distance
  var x = x0 + (x2-x1);
  var Y = y0 + (y2-y1);
  Assign x and Y values to left and top so that the elements move to the appropriate position
  Test.style.left = x + ' px ';
  Test.style.top = Y + ' px ';
 }

 Test.onmouseup = function (e) {
  //When the mouse is lifted and the drag ends, the onmousemove assignment is null to
  test.onmousemove = null;
 }
}
</script>

Code optimization

A problem occurs when you use the above code. When the mouse is dragged too fast, the onmousemove mouse will leave the element when it is faster than the triggering interval of the event. This stops the drag-and-drop process of the element.

At this point, if the mousemove and mouseup events are added to the document above, you can solve

<div id= "test" style= "height:100px;width:100px;background:pink;position:absolute;top:0;left:0;" ></div>
<script>
test.onmousedown = function (e) {
 e = e | | event;
 Gets the x-axis and y-axis distance of the element distance-locating parent
 var x0 = this.offsetleft;
 var y0 = this.offsettop;
 To obtain the mouse distance from the upper-left corner of the x-axis and the y-axis distance
 var x1 = e.clientx;
 var y1 = e.clienty;

 Document.onmousemove = function (e) {
  e = e | | event;
  Get the X-axis and y-axis distance of the upper-left corner of the viewport at this time
  x2 = e.clientx;
  y2 = e.clienty; 
  Calculate the element at this time should be distance from the upper-left corner of the viewport x-axis and y-axis distance
  var x = x0 + (x2-x1);
  var Y = y0 + (y2-y1);
  Assign x and Y values to left and top so that the elements move to the appropriate position
  Test.style.left = x + ' px ';
  Test.style.top = Y + ' px ';
 }

 Document.onmouseup = function (e) {
  //When the mouse is lifted and the drag ends, the onmousemove assignment is null to
  document.onmousemove = null;
 }
}
</script>

Drag and Drop conflict

Because text and pictures default to support native drag and drop, if the original drag-and-drop and simulation drag together, will result in inconsistent with the expected effect

If the content of the dragged element has text, and the text is selected triggers the text's native drag-and-drop effect

Double-click on the text above, you can select text, and then move the mouse, will trigger the text of the original drag-and-drop effect, as shown below

As long as the onmousedown event blocks the default behavior of the browser

<div id= "test" style= "height:100px;width:100px;background:pink;position:absolute;top:0;left:0;" > Test text </div>
<script>
test.onmousedown = function (e) {
 e = e | | event;
 Gets the x-axis and y-axis distance of the element distance-locating parent
 var x0 = this.offsetleft;
 var y0 = this.offsettop;
 To obtain the mouse distance from the upper-left corner of the x-axis and the y-axis distance
 var x1 = e.clientx;
 var y1 = e.clienty;

 Document.onmousemove = function (e) {
  e = e | | event;
  Get the X-axis and y-axis distance of the upper-left corner of the viewport at this time
  x2 = e.clientx;
  y2 = e.clienty; 
  Calculate the element at this time should be distance from the upper-left corner of the viewport x-axis and y-axis distance
  var x = x0 + (x2-x1);
  var Y = y0 + (y2-y1);
  Assign x and Y values to left and top so that the elements move to the appropriate position
  Test.style.left = x + ' px ';
  Test.style.top = Y + ' px ';
 }

 Document.onmouseup = function (e) {
  //When the mouse is lifted and the drag ends, the onmousemove assignment is null to
  document.onmousemove = null;
 }
 //block default behavior return
 false;
}
</script>

IE compatible

The above code still cannot block the default behavior in the Ie8-browser. At this point, in order to achieve IE compatibility, you need to use global capture setCapture() and release capturereleaseCapture()

First, look at the effects of global capture

In the following code, after the global capture is turned on, all the click Effects on the page are equivalent to the Click Effect on the button. After releasing the capture, the effect disappears

Attention IE browser fully supports global capture; Chrome does not support, use global capture will error; Firefox does not complain, but silence fails

<button id= "BTN1" > button one </button>
<button id= "BTN2" > Open button One's global capture </button>
<script >
Btn1.onclick = function () {
 alert (1);
}
Btn2.onclick = function () {
 if (btn1.setcapture) {
  if (btn2.innerHTML.charAt (0) = = ' Open ') {
   btn1.setcapture ();
   btn2.innerhtml = ' Turn off global capture of button one ';
  else{
   btn1.releasecapture ();
   btn2.innerhtml = ' Toggle Global capture of button ';
}} </script>

To cancel the default behavior of text native drag and drop by setting global capture in IE browser

<div id= "test" style= "height:100px;width:100px;background:pink;position:absolute;top:0;left:0;" > Test text </div>
<script>
test.onmousedown = function (e) {
 e = e | | event;
 Gets the x-axis and y-axis distance of the element distance-locating parent
 var x0 = this.offsetleft;
 var y0 = this.offsettop;
 To obtain the mouse distance from the upper-left corner of the x-axis and the y-axis distance
 var x1 = e.clientx;
 var y1 = e.clienty;

 Document.onmousemove = function (e) {
  e = e | | event;
  Get the X-axis and y-axis distance of the upper-left corner of the viewport at this time
  x2 = e.clientx;
  y2 = e.clienty; 
  Calculate the element at this time should be distance from the upper-left corner of the viewport x-axis and y-axis distance
  var x = x0 + (x2-x1);
  var Y = y0 + (y2-y1);
  Assign x and Y values to left and top so that the elements move to the appropriate position
  Test.style.left = x + ' px ';
  Test.style.top = Y + ' px ';
 }

 Document.onmouseup = function (e) {
  //When the mouse is lifted and the drag ends, the onmousemove assignment is null to
  document.onmousemove = null;
  Releases the global capture
  if (test.releasecapture) {
   test.releasecapture ();
  }
 }
 Block default behavior return
 false;
 ie8-Browser block default behavior
 if (test.setcapture) {
  test.setcapture ();
 }
}
</script>

Summarize

The above is the JavaScript simulation drag and drop all the content, I hope the content of this article for everyone's study or work can bring certain help, if there is doubt you can message exchange.