Implementation of the JavaScript drag-and-drop principle

Basic ideas for the implementation of drag and drop

The basic principle of drag and drop is to move the dragged element according to the movement of the mouse. The movement of the mouse is the change of x and y coordinates; the movement of the elements is the change of style.position top and left. Of course, not at any time to move the mouse to cause the movement of elements, but should determine whether the state of the left mouse button is pressed, whether it is pressed on the elements can be dragged.

Based on the above principles, I have written the following basic ideas. The sense code is still relatively short,

2. View Plaincopy to Clipboardprint
4. Drag state = 0 when the mouse is pressed on the element {
6. Drag state = 1
8. Record the x and y coordinates of the mouse
10. Record the x and y coordinates of the element
12. }
14. When the mouse moves on the element {
16. If the drag state is 0, do nothing.
18. If the drag state is 1, then
20. Element y = Now mouse y-Original mouse y + original element y
22. Element x = Now mouse x-original mouse x + original element x
24. }
26. When the mouse is released at any time {
28. Drag state = 0
30. }

The above ideas can be translated into JS code to achieve the effect of drag and drop.

JavaScript code

2. View Plaincopy to Clipboardprint
4. <mce:script type="Text/javascript" ><!--
6. var dragging = false;
8. var test;
10. var Mousey;
12. var mousex;
14. Window.onload = function () {
16. Test = document.getElementById ("test");
18. Test.onmousedown = down;
20. Test.onmousemove = move;
22. Document.onmouseup = up;
24. Test.style.position = "relative";
26. Test.style.top = "0px";
28. Test.style.left = "0px";
30. }
32. function Down (event)
34. {
36. Event = Event | | window.event;
38. dragging = true;
40. MouseX = parseint (EVENT.CLIENTX);
42. Mousey = parseint (Event.clienty);
44. Objy = parseint (test.style.top);
46. OBJX = parseint (test.style.left);
48. }
50. function Move (event) {
52. Event = Event | | window.event;
54. if (dragging = = true) {
56. var x, y;
58. y = Event.clienty-mousey + objy;
60. x = Event.clientx-mousex + objx;
62. Test.style.top = y + "px";
64. Test.style.left = x + "px";
66. }
68. }
70. function up () {
72. dragging = false;
74. }
76. //--></mce:script>

HTML code

2. View Plaincopy to Clipboardprint
4. <div id="test" style="border:1px solid; width:400px; Background: #CCCCCC; " >
6. <P> I'm dragging a sample div. </P>
8. <p> You can test the effect. </P>
10. </div>

Demo Code

1. + Expand Sourceview plaincopy to Clipboardprint

shortcomings and the place to be perfected

This drag-and-drop example is quite imperfect, but it has already achieved the most fundamental core of drag and drop. Think of the perfect part of the following points: The method of obtaining the X and y coordinates of an element is simplified in this article; This article only lets a fixed element has the drag function, the flexibility is too poor, the mouse style does not have the transformation, the quick "disorderly drag and drop" has the certain probability to have the question. One of the last problems temporarily do not know how to solve, the front three more good to do.

Implementation of the JavaScript drag-and-drop principle