Drag and drop with constructor object

Using constructor object is a standard way for OOP design. Although only 50 lines in the following script, you can attach event function at the stage of start, drag and drop.

Here's the script.

function drag(id) {
    this.id = id;
}

drag.prototype = { 
    init:function() {
        this.elem = document.getElementById(this.id);		
        this.elem.onmousedown = this._mouseDown.bind(this);			 
	},

    _mouseDown: function(e) {
        e = e || window.event;
        this.elem.onselectstart=function(){return false};
        this._event_docMouseMove = this._docMouseMove.bind(this);		
		this._event_docMouseUp = this._docMouseUp.bind(this);	
			
        if (this.onstart) this.onstart();
        this.x = e.clientX||e.PageX;
        this.y = e.clientY||e.PageY;
		
        this.left = parseInt(this.elem.style.left);
        this.top = parseInt(this.elem.style.top);
        
        addEvent(document, 'mousemove', this._event_docMouseMove);	
        addEvent(document, 'mouseup', this._event_docMouseUp);
        return false;	
    },
    
    _docMouseMove: function(e) {    
        this.setValuesClick(e);	   
        if (this.ondrag) this.ondrag();
    },

    _docMouseUp: function(e) {
        removeEvent(document, 'mousemove', this._event_docMouseMove);
        if (this.onstop) this.onstop();
        removeEvent(document, 'mouseup', this._event_docMouseUp);
                    
    },
    
    setValuesClick: function(e){ 
        this.mouseX = e.clientX||e.PageX;
        this.mouseY = e.clientY||e.pageY;
        this.X = this.left+ this.mouseX - this.x;	
        this.Y = this.top + this.mouseY - this.y;
        this.elem.style.left = this.X+"px";
        this.elem.style.top = this.Y +"px";    	
    }

}

How to use?

Start the drag and drop ...

var drag1 = new drag("id");
drag1.init();

Drag and drop with static $ object

Although the most part of the script is the same as that using constructor object, this script is easy to be integrated with the animation script of div move or fading. Here's an example. Drag the box into the container or move back to the start point.

Here's the script.

function(id){
    var $ =  (typeof id  =="string") ? document.getElementById(id) : id;
    this.start ={};
    $.start = function() {
        var left = getstyle($,"left");
        var top =  getstyle($,"top");	 
        $.start.left = (left=="auto") ? 0 : parseInt(left);
        $.start.top = (top=="auto") ? 0 : parseInt(top);
    }
    
    $.drag = function() {
	    this.onmousedown = this._mouseDown.bind(this);     	  
    };

    $._mouseDown = function(e) {
        e = e || window.event;	
        this.onselectstart=function(){return false};
        this.start();
        this._event_docMouseMove = this._docMouseMove.bind(this);		
        this._event_docMouseUp = this._docMouseUp.bind(this);	
    		
        addEvent(document, 'mousemove', this._event_docMouseMove);	
		   	 
        if (this.onstart) this.onstart();	  
    		  
        this.x = e.clientX||e.PageX;		    
        this.y = e.clientY||e.pageY;
        this.left = this.start.left;
        this.top =this.start.top;
		   
        addEvent(document, 'mouseup', this._event_docMouseUp);
            
        return false;	
    };
        
    $._docMouseMove = function(e) {
        if (this.ondrag) this.ondrag();
        this.setValuesClick(e);	   
    };
        
    $._docMouseUp = function(e) {
        removeEvent(document, 'mousemove', this._event_docMouseMove);
        if (this.onstop)  this.onstop();            
        removeEvent(document, 'mouseup', this._event_docMouseUp);   
    };
     
    $.setValuesClick = function(e){        
        this.mouseX = e.clientX||e.PageX;
        this.mouseY = e.clientY||e.pageY;
	    this.X = this.left+ this.mouseX - this.x;	
	    this.Y = this.top + this.mouseY - this.y;
	    this.style.left = this.X+"px";
	    this.style.top = this.Y +"px";		    
    };

    return $;  
}

How to use?

Just drag...

 $("test").drag();

Attach the events. Here's demo of attaching an onstop event when mouseup. You can use this keyword inside the block and integrate div move method seamlessly.

$("test").onstop = function() { 
     ....
     ....
 
     this.move({delay:200,to:{left:left,top:top}},function(){    
     ....
     ....
    
    });
 }

Another demo

Drag list