JQuery use drag effect for free drag div_jquery-js tutorial

This article will share with you a perfect drag (drag div layer effects) implemented by jquery. If you are looking for such effects, please refer to it. Accidentally saw a simple p drag effect previously made, modified some notes, the test is perfect through firefox/chrome/ie6-11, is now used to share.

First, let's talk about the implementation principles and key points. There are three major steps. The first step is the mousedown event. When the mouse mousedown, record the X and Y axes of the mouse and the left and top of the drag and drop boxes, and assign true to the drag mark, which indicates that the drag and drop operation is ready. The second step is the mousemove event. At this time, the X and Y axes of the mouse are dynamically obtained, and the left and top of the drag box are calculated and assigned values to implement the drag effect. The third step is the mouseup event. When the mouse is started, the drag tag is assigned false, and the drag operation is complete.

The html code is as follows:

  Title--Move

The js Code is as follows:

(Function ($) {$. fn. dragDiv = function (pWrap) {return this. each (function () {var $ pMove = $ (this); // drag the area var $ pWrap = pWrap? $ PMove. parents (pWrap): $ pMove; // var mX = 0, mY = 0; // defines the X axis of the mouse, var dX = 0, dY = 0; // define the left and top positions of p var isDown = false; // mousedown mark if (document. attachEvent) {// ie event listening. When you drag p, the selected content is not allowed. firefox and chrome have set-moz-user-select: none in css; -webkit-user-select: none; $ pMove [0]. attachEvent ('onselectstart', function () {return false ;}) ;}$ pMove. mousedown (function (event) {var event = event | window. event; mX = event. clientX; mY = event. clientY; dX = $ pWrap. offset (). left; dY = $ pWrap. offset (). top; isDown = true; // drag and drop the mouse to start}); $ (document ). mousemove (function (event) {var event = event | window. event; var x = event. clientX; // the X axis var y = event when the mouse slides. clientY; // the y axis if (isDown) {export pwrap.css ({"left": x-mX + dX, "top": y-mY + dY}) when the mouse slides }); // p dynamic position assignment}); $ pMove. mouseup (function () {isDown = false; // drag the mouse to end}) ;};}) (jQuery); // $ (document ). ready (function () {$ ("# move1 "). dragDiv (); // drag the entire p $ ("# move2 "). dragDiv (". pWrap "); // drag the p header });

Finally, you need to disable the selected content before starting the drag action. Otherwise, the drag effect will be affected. Firefox and chrome can be set through css: {-moz-user-select: none;-webkit-user-select: none ;}, ie can also directly write an onselectstart = "return false" in html, but chrome seems to be affected, so I decided to cancel this writing, then, write an onselectstart event for IE browser in js.

This small plug-in is simple to implement drag-and-drop effects, but the compatibility is very good, it also uses some knowledge points and techniques. Of course, you can also use this plug-in or the idea to continue to expand and write a relatively complete drag-and-drop plug-in (such as Draggable and Droppable ).

The above is all the content of this article. I hope you will like it.