Work needs to write a JS drag-and-drop component _javascript Tips

Copy Code code as follows:

/*
* Use method:
* var d = new Drag ({id: ' Dragpannel ', maxleft:500,maxtop:200});
* D.ready ();
* Please note:
* Drag the left and top style of the object must be written in its Style property
*
*/
Correct the caller. Call the FN as a newObj method
function Repaircaller (NEWOBJ, FN) {
return function () {
Return fn.apply (NEWOBJ, arguments);
}
}
function Drag (config) {
This.movetarget = T.dom.get (config.id);
This.startleft = parseint (this.moveTarget.style.left); The left,top of the dragged object each time the drag starts
This.starttop = parseint (this.moveTarget.style.top);
This.startclientx = This.startleft; Saves the ClientX of the event when the drag starts, ClientY
This.startclienty = This.starttop;
This. Max_left = config.maxleft| | Document.documentelement.clientwidth-this.movetarget.offsetwidth; The maximum range that an element can move
This. Max_top = config.maxtop| | Document.documentelement.clientheight-this.movetarget.offsetheight;
This.lock = true;
}
Drag.prototype.ready = function () {
Binding events
T.bind (document, "MouseDown", Repaircaller (This,this.down));
T.bind (document, "MouseMove", Repaircaller (This,this.move));
T.bind (document, "MouseUp", Repaircaller (This,this.stop));
}
Drag.prototype.down = function () {
Get Event Object
var event = t.event.getevent (Arguments[0]),
target = T.event.gettarget (event);
if (target = = This.movetarget) {
This.lock = false;
Save various coordinate positions at the start of the event
This.startleft = parseint (this.moveTarget.style.left);
This.starttop = parseint (this.moveTarget.style.top);
This.startclientx = Event.clientx;
This.startclienty = Event.clienty;
}
};
Drag.prototype.move = function () {
if (!this.lock) {
Get Event Object
var event = t.event.getevent (Arguments[0]),
target = T.event.gettarget (event);
if (target = = This.movetarget) {
If there is a choice of content, clear the
Window.getselection? Window.getselection (). Removeallranges (): Document.selection.empty ();
Dine drag range exceeds maximum limit
var realleft = This.startleft + event.clientx-this.startclientx,//actual move Range
Realtop = This.starttop + Event.clienty-this.startclienty,
Rightleft, Righttop; Correct left and top value
Rightleft = realleft > this. Max_left? This. Max_left: (Realleft > 0 realleft:0);
Righttop = realtop > this. Max_top? This. Max_top: (realtop > 0 realtop:0);
This.moveTarget.style.left = rightleft + "px";
This.moveTarget.style.top = righttop + "px";
}
else{
This.lock = true;
}
}
};
Drag.prototype.stop = function () {
This.lock = True
};

Postscript:
Some of the most important points to note in the writing process are:
1, drag layer of position, left and top must be written in style
2, the move process set left and top to take units, or not function
3, Multilevel div nesting needs to give the parent div plus Over-flow:hidden style
Complete!