A js drag and drop component that needs to be written for work_javascript skills

Copy code The code is as follows:

/*
*Usage:
* var d = new Drag({id:'dragPannel',maxLeft:500,maxTop:200});
* d.ready();
*Please note:
* The left and top styles of the drag object Must be written in its style attribute
*
*/
//Correct the caller. Call fn as a method of newObj
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); //Every time drag starts The left and top of the dragged object
this.startTop = parseInt(this.moveTarget.style.top);
this.startClientX = this.startLeft; //Save the clientX, clientY of the event when dragging starts
this.startClientY = this.startTop;
this.MAX_LEFT = config.maxLeft||document.documentElement.clientWidth - this.moveTarget.offsetWidth; //The maximum range that the element can move
this.MAX_TOP = config .maxTop||document.documentElement.clientHeight - this.moveTarget.offsetHeight;
this.lock = true;
}
Drag.prototype.ready = function(){
//Bind event
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 the 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 the event object
var event = T.event.getEvent(arguments[0]),
target = T.event.getTarget(event);
if(target = = this.moveTarget){
//If there is selection content, clear it
//window.getSelection? window.getSelection().removeAllRanges(): document.selection.empty();
// Check whether the dragging range exceeds the maximum limit
var realLeft = this.startLeft event.clientX - this.startClientX, //Actual moving range
realTop = this.startTop event.clientY - this.startClientY,
rightLeft, rightTop; //Correct left, top values
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:
A few points that need to be paid attention to during the writing process are:
1. The position, left and top of the drag layer must be written In the style
2. Set left and top with units during the movement, otherwise it will not work
3. When nesting multi-level divs, you need to add over-flow:hidden style to the parent div
Done!