Simple drag effect, free drag div implementation and note, drag effect drag div

Simple drag effect, free drag div implementation and note, drag effect drag div

Accidentally saw a simple div 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:

<div class="divWrap" id="move1" style="width: 200px; height: 200px; background: Green; border: 1px solid red; position: absolute; top: 100px; left: 100px; cursor: move; -moz-user-select: none; -webkit-user-select: none;"></div><div class="divWrap" style="width: 200px; height: 200px; background: brown; border: 1px solid red; position: absolute; top: 300px; left: 100px;">    

The js Code is as follows:
(Function ($) {$. fn. dragDiv = function (divWrap) {return this. each (function () {var $ divMove = $ (this); // drag the area var $ divWrap = divWrap? $ DivMove. parents (divWrap): $ divMove; // var mX = 0, mY = 0; // defines the X axis of the mouse, var dX = 0, dY = 0; // define the left and top positions of the div var isDown = false; // mousedown mark if (document. attachEvent) {// ie event listener. When you drag a div, the selected content is forbidden. firefox and chrome have set-moz-user-select: none in css; -webkit-user-select: none; $ divMove [0]. attachEvent ('onselectstart', function () {return false ;}) ;}$ divMove. mousedown (function (event) {var event = event | window. event; mX = event. clientX; mY = event. clientY; dX = $ divWrap. offset (). left; dY = $ divWrap. 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) {nvidivwrap.css ({"left": x-mX + dX, "top": y-mY + dY}) when the mouse slides }); // div dynamic position assignment}); $ divMove. mouseup (function () {isDown = false; // drag the mouse to end}) ;};}) (jQuery); // $ (document ). ready (function () {$ ("# move1 "). dragDiv (); // drag the entire div $ ("# move2 "). dragDiv (". divWrap "); // drag the div 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 ).