My view of JavaScript drag (drag)-Simple version

Javascript

RT, drag may be more popular now one of the JS effect, in the exclamation of the magic of the Creator, I conceived of curiosity, but also to try a (of course, is to appreciate a lot of drag code based on, and delusion through the simplest way to achieve).

In fact, the drag effect can consist of 3 main parts, start dragging, drag, end drag.

Hey, do not say so much (photography friend must say, why not yet on the map ...) Well, I'll just have some code.

Before you start dragging, go to 2 simple tool methods:

1 var Utils = {
2 "Gettarget": function (EV) {
3//Get the current target source object
4 ev = EV | | window.event;
5 var tget = Ev.target | | Ev.srcelement;
6 return tget;
7},
8 "GetPosition": function (EV) {
9//SET coordinates
10//Simulate the effect of a mouse following
EV = EV | | window.event;
return {Top:document.body.scrollTop + Ev.clienty + 10,
Left:document.body.scrollLeft + Ev.clientx + 10};
14}
15}
Relatively simple, I believe you can read the comments are able to understand.

Below, start the important part of this chapter and drag. Let's look at the code first:
<div id= "Container1" container= "true" style= "Width:200px;height:300px;background-color:fffff2;float:left" > <div id= "Test1" dragable= "true" style= "Width:200px;background-color:ff00f0;cursor:pointer" >111</div> <div id= "Test2" dragable= "true" style= "Width:200px;background-color:ffaaf0;cursor:pointer" >222</div> <div id= "Test3" dragable= "true" style= "Width:200px;background-color:ff76af;cursor:pointer" >333</div> <div id= "Test4" dragable= "true" style= "Width:200px;background-color:ffa770;cursor:pointer" >444</div> <div id= "Test5" dragable= "true" style= "Width:200px;background-color:a90af0;cursor:pointer" >555</div> </div><div id= "Container3" align= "center" style= "Width:100px;height:300px;float:left" > </div> <div id= "Container2" container= "true" style= "Width:200px;height:300px;background-color:fffff2;float:left" > <div id= "Test6" dragable= "true" style= "Width:200px;background-color:b22002;cursor:pointer" >666</div><div id= "Test7" dragable= "true" style= "Width:200px;background-color:b2ff02;cursor:pointer" >777< /div><div id= "Test8" dragable= "true" style= "Width:200px;background-color:b2aa02;cursor:pointer" >888</ Div><div id= "Test9" dragable= "true" style= "Width:200px;background-color:b2bbc2;cursor:pointer" >999</ Div><div id= "test10" dragable= "true" style= "Width:200px;background-color:b22aaa;cursor:pointer" >1010< /div></div><script language= "javascript" >var Drag = {"Movediv": null, "dragobj": null, "draging": false, ' Start ': function (ev) {drag.dragobj = Utils.gettarget (EV); if (Drag.isdragable ()) {drag.creatediv ();D rag.draging = false;} return false;}, "Draging": function (EV) {if (!) Drag.isdragable () | | Drag.movediv = = null) {return;} Sets the mouse following effect for the selected object if (! drag.draging) {var move = Drag.dragObj.cloneNode (True);D the Rag.moveDiv.appendChild (move);} drag.movediv.style.top  = (utils.getposition (EV)). Top;drag.movediv.style.left = (utils.getposition (EV)). Left ;//MakeUse DOM to replace the position of the element in the drag var mouseoverobj = utils.gettarget (EV); if (Mouseoverobj.getattribute ("dragable") | | Mouseoverobj.getattribute ("container")) {if (Drag.dragObj.parentNode!= mouseoverobj.parentnode) {if ( mouseoverobj.nextsibling) {MouseOverObj.parentNode.insertBefore (drag.dragobj,mouseoverobj);} Else{mouseoverobj.parentnode.appendchild (drag.dragobj);} Else{if (mouseoverobj.nextsibling) {Drag.dragObj.parentNode.insertBefore (drag.dragobj,mouseoverobj);} Else{drag.dragobj.parentnode.appendchild (Drag.dragobj);}} Set state to drag drag.draging = True;return false;, "End": function () {drag.dragobj = Null;drag.removediv ();D rag.draging = False;return false;}, "Removediv": function () {//Remove the virtual div layer that follows the mouse movement when dragging (Drag.movediv!= null) { Drag.moveDiv.style.display = "None";D rag.moveDiv.parentNode.removeChild (drag.movediv);D rag.movediv = null;}, " Creatediv ': function () {///Initialize the virtual div layer that follows the mouse movement when dragging Drag.removediv ();D rag.movediv = document.createelement ("div");D Rag.moveDiv.style.cssText = "position:absolute;z-index:10;"; Document.body. appendchild (Drag.movediv);}, "Isdragable": function () {//Verify that the current object is a drag object if (drag.dragobj = = NULL | |!). Drag.dragObj.getAttribute ("dragable")) {return false;} return true;} var Utils = {"Gettarget": function (EV) {//Get current target source object ev = EV | | Window.event;var tget = ev.target | | Ev.srcelement;return TG ET}, "getPosition": function (EV) {//Set coordinates//simulate a mouse-following effect ev = EV | | Window.event;return {TOP:DOCUMENT.BODY.SCROLLTOP + Ev.clienty + 10,left:document.body.scrollleft + ev.clientx + 10};} Document.onmousemove = drag.draging;document.onmouseup   = Drag.end;document.onmousedown = Drag.start;< /script>
(If you want to see the effect of deep motion, you can click here to run)
1var Drag = {
2 "Movediv": null,
3 "dragobj": null,
4 "draging": false,
5 "Start": function (EV) {
6 drag.dragobj = utils.gettarget (EV);
7 if (drag.isdragable ()) {
8 Drag.creatediv ();
9 drag.draging = false;
10}
one return false;
12},
"Draging": function (EV) {
if (! Drag.isdragable () | | Drag.movediv = = null) {
return;
16}
17
18//Set the mouse following effect of the selected object
if (! drag.draging) {
var move = Drag.dragObj.cloneNode (true);
Drag.moveDiv.appendChild (move);
22}
Drag.moveDiv.style.top = (utils.getposition (EV)). Top;
Drag.moveDiv.style.left = (utils.getposition (EV)). Left;
25
26//Using DOM to replace the position of elements in the drag process
var mouseoverobj = utils.gettarget (EV);
if (Mouseoverobj.getattribute ("dragable") | | | mouseoverobj.getattribute ("container")) {
if (Drag.dragObj.parentNode!= mouseoverobj.parentnode) {
if (mouseoverobj.nextsibling) {
MouseOverObj.parentNode.insertBefore (Drag.dragobj,mouseoverobj);
}else{
MouseOverObj.parentNode.appendChild (Drag.dragobj);
34}
Km}else{
if (mouseoverobj.nextsibling) {
Panax Notoginseng Drag.dragObj.parentNode.insertBefore (drag.dragobj,mouseoverobj);
}else{
Drag.dragObj.parentNode.appendChild (Drag.dragobj);
40}
41}
42}
43
44//Set State to drag
Drag.draging = true;
return false;
47},
"End": function () {
Drag.dragobj = null;
Drag.removediv ();
Wuyi drag.draging = false;
return false;
53},
"Removediv": function () {
55//Remove the virtual div layer that follows the mouse movement when dragging
if (drag.movediv!= null) {
Drag.moveDiv.style.display = "None";
Drag.moveDiv.parentNode.removeChild (DRAG.MOVEDIV);
Drag.movediv = null;
60}
61},
"Creatediv": function () {
63//Initialize the virtual div layer that follows the mouse movement when dragging
Drag.removediv ();
Drag.movediv = document.createelement ("div");
Drag.moveDiv.style.cssText = "position:absolute;z-index:10;";
Document.body.appendChild (DRAG.MOVEDIV);
68},
"Isdragable": function () {
70//Verify that the current object is a drag object
if (drag.dragobj = NULL | |!) Drag.dragObj.getAttribute ("dragable")) {
return false;
73}
The return true;
75}
963

A little bit more yo, hehe ~ ~
First look at the "Start" method, first get the event source, and then determine whether the current object can be dragged, if you can drag, call Drag.creatediv (), set a virtual div, to show the current object following the mouse movement, and then drag.draging = False
Sets the current drag state to not drag. The last one, return false, don't forget, do not write in FF will be a little problem.

Then look at the "draging" method, also first determine whether the current object can be dragged, and then determine the current drag state, if False, copy the object currently dragged and add to the div that follows the mouse movement, so that the current object is moving with the mouse. In fact, the following code is relatively simple, mainly for element position replacement (nextsibling as if in the FF can not be used, so, ff the last object moving down a bit of a problem). But in the process of dragging, need to pay attention to a problem, is currently following the mouse to move the DIV layer do not block the cursor, if blocking the cursor, you can not use a simple srcelement method to get to the current elements, you may only through the coordinates of the judgment and other methods to achieve ... It's kind of complicated.

The "End" method, in fact, is much simpler, almost all of which are cleanup operations.

Finally, don't forget to add event monitoring and HTML code.
1document.onmousemove = drag.draging;
2document.onmouseup = Drag.end;
3document.onmousedown = Drag.start;1<div id= "Container1" container= "true" style= "width:200px;height:300px; Background-color:fffff2;float:left ">
2 <div id= "Test1" dragable= "true" style= "Width:200px;background-color:ff00f0;cursor:pointer" >111</div>
3 <div id= "Test2" dragable= "true" style= "Width:200px;background-color:ffaaf0;cursor:pointer" >222</div>
4 <div id= "Test3" dragable= "true" style= "Width:200px;background-color:ff76af;cursor:pointer" >333</div>
5 <div id= "Test4" dragable= "true" style= "Width:200px;background-color:ffa770;cursor:pointer" >444</div>
6 <div id= "Test5" dragable= "true" style= "Width:200px;background-color:a90af0;cursor:pointer" >555</div>
7</div>

Over, I this is just a simple drag effect, hehe! I hope you can find a simpler way.