Simple drag effect, free drag div implementation and attention point

Occasionally saw the previous do a concise div drag effect, modified a bit of comments, tested perfect through the firefox/chrome/ie6-11, now take to share.

First of all, the implementation of the principle and key points, the main three steps. The first step is the MouseDown event, when the mouse MouseDown the x-axis and the y-axis of the mouse and the left and top of the drag-and-drop box, and assigns a value of true to the drag tag, which means that the drag action is ready. The second step is the MouseMove event, which gets the x and y axes of the mouse dynamically, then calculates the new left and top of the drag box and assigns a value to it for drag. The third step is to MouseUp the event, when the mouse bounces off the tag value false, drag and drop the action completed.

The HTML code is as follows:

<Divclass= "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><Divclass= "Divwrap"style= "width:200px; height:200px; background:brown; border:1px solid red; position:absolute; top:300px; left:100px;" >    <H3ID= "Move2"style= "height:45px; line-height:45px; font-size:18px; background:red; margin:0; cursor:move;-moz-user-select:none; -webkit-user-select:none; ">Title--move</H3></Div>

The JS code is as follows:

(function($) {$.fn.dragdiv=function(divwrap) {return  This. each (function() {            var$divMove = $ ( This);//mouse can be dragged and dragged area            var$divWrap = Divwrap? $divMove. Parents (Divwrap): $divMove;//Entire moving area            varMX = 0, MY = 0;//define the Y axis of the mouse x axis            varDX = 0, DY = 0;//Define Div left, top position            varIsdown =false;//MouseDown Mark            if(document.attachevent) {//IE Event Monitoring, drag div to prohibit the selection of content, Firefox and Chrome has been set in the CSS-moz-user-select:none;-webkit-user-select:none;$divMove [0].attachevent (' onselectstart ',function() {                    return false;            }); } $divMove. MouseDown (function(event) {varEvent = Event | |window.event; MX=Event.clientx; MY=Event.clienty; DX=$divWrap. Offset (). Left; DY=$divWrap. Offset (). Top; Isdown=true;//Mouse Drag to start            }); $ (document). MouseMove (function(event) {varEvent = Event | |window.event; varx = Event.clientx;//x-axis when mouse is sliding                vary = event.clienty;//y-Axis when mouse is sliding                if(Isdown) {$divWrap. css ({"Left": X-mx + DX, "top": Y-my + DY});//div Dynamic Location Assignment                }            }); $divMove. MouseUp (function() {Isdown=false;//mouse drag and drop end            });    }); };}) (jQuery);//$ (document). Ready (function() {    $("#move1"). Dragdiv ();//dragging the entire Div$ ("#move2"). Dragdiv (". Divwrap");//Dragging Div head});

Finally, to explain, before you start the drag action, to prohibit the selection, otherwise affect the drag effect. Firefox and Chrome can be set via CSS: {-moz-user-select:none;-webkit-user-select:none;}, IE can also be directly in the HTML to write a onselectstart= "return false", but it seems that Chrome has been affected, so decided to cancel the wording, and then in JS for IE browser to write a onselectstart event.

This small plug-in is simply to achieve drag-and-drop effect, but the compatibility is very good, there are some knowledge points and techniques. Of course, you can also use this plugin or the idea inside to continue to expand, write a relatively perfect drag plug (such as: Draggable and droppable).

Simple drag effect, free drag div implementation and attention point