Javascript Animation: Drag and Drop Effects

Javascript Animation: Drag and Drop Effects

First, let's look at the implementation. The simulated drag-and-drop effect is similar to that of moving folders on the desktop.

Principles

When you press the mouse, drag and drop to start. When the mouse moves, the drag element moves along with the mouse. When the mouse is raised, the drag ends.

Therefore, the focus of dragging is to determine how the drag element moves.

Assume that when the mouse is pressed, The clientX and clientY of the mouse object are x1 and x2 respectively. The elements are x0 and y0 from the X and Y axes in the upper left corner of the port.

At a certain point in the mouse movement, the clientX and clientY are x2 and y2 respectively.

Therefore, the distance between the X and Y axes of element movement is x2-x1 and y2-y1, respectively.

After the element is moved, the element is located at the x-axis and Y-axis in the upper left corner of the view.

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

Code Implementation

Use the code to implement the above principles as follows:

When you press the mouse, the initial x0 and y0 useoffsetLeftAndoffsetTopIndicates

When the mouse moves, the x and y values of the instantaneous state are 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; // obtain the element's distance from the X axis and Y axis of the parent level to var x0 = this. offsetLeft; var y0 = this. offsetTop; // obtain the distance between the mouse and the X axis and the Y axis from the upper left corner of the browser to var x1 = e. clientX; var y1 = e. clientY; test. onmousemove = function (e) {e = e | event; // obtain the x-axis and Y-axis distance from the mouse to the upper-left corner of the viewport x2 = e. clientX; y2 = e. clientY; // calculate the distance between the element and the Y axis in the upper-left corner of the view and var X = x0 + (x2-x1); var Y = y0 + (y2-y1 ); // assign the values of X and Y to left and top to move the element to the corresponding position test. style. left = X + 'px '; test. style. top = Y + 'px ';} test. onmouseup = function (e) {// when the mouse is raised and the drag ends, onmousemove is assigned null to test. onmousemove = null ;}</script>

Code optimization

When using the above Code, a problem occurs. When the mouse is dragged too fastonmousemoveWhen the trigger interval of an event is faster, the mouse will exit from the element. In this way, the Drag and Drop Process of elements is stopped.

In this casemousemoveAndmouseupAll events are addeddocumentTo solve the problem.

<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; // obtain the element's distance from the X axis and Y axis of the parent level to var x0 = this. offsetLeft; var y0 = this. offsetTop; // obtain the distance between the mouse and the X axis and the Y axis from the upper left corner of the browser to var x1 = e. clientX; var y1 = e. clientY; document. onmousemove = function (e) {e = e | event; // obtain the x-axis and Y-axis distance from the mouse to the upper-left corner of the viewport x2 = e. clientX; y2 = e. clientY; // calculate the distance between the element and the Y axis in the upper-left corner of the view and var X = x0 + (x2-x1); var Y = y0 + (y2-y1 ); // assign the values of X and Y to left and top to move the element to the corresponding position test. style. left = X + 'px '; test. style. top = Y + 'px ';} document. onmouseup = function (e) {// when the mouse is raised and the drag ends, onmousemove is assigned null to document. onmousemove = null ;}</script>

Drag conflict

Text and images support native drag-and-drop by default. If native drag-and-drop and simulated drag-and-drop are mixed together, they will not match the expected results.

If the content of the drag-and-drop element contains text, and the selected text triggers the native drag-and-drop effect of the text.

Double-click the text above to select the text. Moving the mouse will trigger the native drag-and-drop effect of the text, as shown below:

As longonmousedownThe event stops the browser's default behavior.

<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; // obtain the element's distance from the X axis and Y axis of the parent level to var x0 = this. offsetLeft; var y0 = this. offsetTop; // obtain the distance between the mouse and the X axis and the Y axis from the upper left corner of the browser to var x1 = e. clientX; var y1 = e. clientY; document. onmousemove = function (e) {e = e | event; // obtain the x-axis and Y-axis distance from the mouse to the upper-left corner of the viewport x2 = e. clientX; y2 = e. clientY; // calculate the distance between the element and the Y axis in the upper-left corner of the view and var X = x0 + (x2-x1); var Y = y0 + (y2-y1 ); // assign the values of X and Y to left and top to move the element to the corresponding position test. style. left = X + 'px '; test. style. top = Y + 'px ';} document. onmouseup = function (e) {// when the mouse is raised and the drag ends, onmousemove is assigned null to document. onmousemove = null;} // block default action return false;} </script>

IE compatibility

The above code still cannot block the default behavior in the IE 8-browser. In this case, Global Capture is required for IE compatibility.setCapture()And release capturereleaseCapture()

First, let's take a look at the Global Capture Effect.

In the following code, after Global Capture is enabled, all the clicking effects on the page are equivalent to the clicking effect on button 1. After the capture is released, the effect disappears.

[Note] Internet Explorer fully supports global capture. chrome does not support global capture. An error is reported when global capture is used. firefox does not report an error, but silent fails.

<Button id = "btn1"> button 1 </button> <button id = "btn2"> enable global capture of button 1 </button> <script> btn1.onclick = function () {alert (1);} btn2.onclick = function () {if (btn1.setCapture) {if (btn2.innerHTML. charAt (0) = 'open') {btn1.setCapture (); btn2.innerHTML = 'Global capture of Button 1 ';} else {btn1.releaseCapture (); btn2.innerHTML = 'Enable Global capture with button 1 '; }}</script>

By setting global capture in IE browser, the default behavior of canceling native text drag-and-drop is achieved.

<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; // obtain the element's distance from the X axis and Y axis of the parent level to var x0 = this. offsetLeft; var y0 = this. offsetTop; // obtain the distance between the mouse and the X axis and the Y axis from the upper left corner of the browser to var x1 = e. clientX; var y1 = e. clientY; document. onmousemove = function (e) {e = e | event; // obtain the x-axis and Y-axis distance from the mouse to the upper-left corner of the viewport x2 = e. clientX; y2 = e. clientY; // calculate the distance between the element and the Y axis in the upper-left corner of the view and var X = x0 + (x2-x1); var Y = y0 + (y2-y1 ); // assign the values of X and Y to left and top to move the element to the corresponding position test. style. left = X + 'px '; test. style. top = Y + 'px ';} document. onmouseup = function (e) {// when the mouse is raised and the drag ends, onmousemove is assigned null to document. onmousemove = null; // release Global Capture if (test. releaseCapture) {test. releaseCapture () ;}/// block default behavior return false; // IE8-the browser blocks default behavior if (test. setCapture) {test. setCapture () ;}}</script>

Summary

The above is all the content of Javascript drag-and-drop simulation. I hope the content in this article will help you in your study or work. If you have any questions, you can leave a message.