Drag and Drop

Drag and Drop

Similar to the script for div move , here I also introduce 2 kinds of script to design drag and drop effect. One is using constructor object and another is using static $ object. I preferred the 2nd method because it's easy to integrate the script for div move with drag and drop, i.e. adding some animations.

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 me

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.

container
Drag me

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

Last updated on Apr.12, 2010
www.pagecolumn.com