Drag and Drop

Drag
and drop: that clicking on an object and hold the mouse button down, move the mouse to another area, and then release the mouse button the object "put" here.
Drag and drop the basic concept is simple: create a absolutely positioned elements, so that it can move with the mouse.

var EventUtil = {
    addHandler: function(element,type,handler){
        if(element.addEventListener){
            element.addEventListener(type,handler,false);
        }else if(element.attachEvent){
            element.attachEvent('on'+type,handler);
        }else {
            element['on'+type] = handler;
        }
    },
    getEvent: function(event){
        return event ? event: window.event;
    },
    getTarget: function(event){
        return event.target || event.srcElement;
    },
    removeHandler: function(element,type,handler){
        if(element.removeEventListener){
            element.removeEventListener(type,handler,false);
        }else if(element.detachEvent){
            element.detachEvent('on'+type,handler);
        }else {
            element['on'+type] = null;
        }
    }
}

EventUtil.addHandler(document,'mousemove',function(event){
    var root = document.getElementById('root');
    root.style.left = event.clientX + 'px';
    root.style.top = event.clientY + 'px';
});

The most simple drag and drop interface using the following code to achieve:

var DragDrop = function(){
    var dragging = null;
    function handleEvent(event){
        //获取事件和目标
        event = EventUtil.getEvent(event);
        var target = EventUtil.getTarget(event);

        //确定事件类型
        switch(event.type){
            case 'mousedown':
                console.log('mousedown');
                if(target.className.indexOf('box')> -1){
                    dragging = target;
                }
                break;
            case 'mousemove':
                console.log('mousemove');
                if(dragging !== null){
                    //指定位置
                    dragging.style.left = event.clientX + 'px';
                    dragging.style.top = event.clientY + 'px';
                }
                break;
            case 'mouseup':
                console.log('mouseup');
                dragging = null;
                break;
        }
    }
    return {
        enable: function(){
            EventUtil.addHandler(document,'mousedown',handleEvent);
            EventUtil.addHandler(document,'mousemove',handleEvent);
            EventUtil.addHandler(document,'mouseup',handleEvent);
        },
        disable: function(){
            EventUtil.removeHandler(document,'mousedown',handleEvent);
            EventUtil.removeHandler(document,'mousemove',handleEvent);
            EventUtil.removeHandler(document,'mouseup',handleEvent);
        }
    }
}()

DragDrop.enable();

Question:
1. Check the target's class will contain 'box' category, this technique can easily be determined by draggable element markup language rather than JavaScript scripts.

if(target.className.indexOf('box')> -1){
    dragging = target;
}

Repair dragging

var DragDrop = function(){
    var dragging = null,diffX=0,diffY=0;
    function handleEvent(event){
        //获取事件和目标
        event = EventUtil.getEvent(event);
        var target = EventUtil.getTarget(event);

        //确定事件
        switch(event.type){
            case 'mousedown': 
                if(event.target.className.indexOf('box')>-1){
                    dragging = target;
                    diffX = event.clientX - target.offsetLeft;
                    diffY = event.clientY - target.offsetTop;
                }
                break;
            case 'mousemove':
                if(dragging !==null){
                    //dragging.style.left = event.clientX + 'px';
                    //dragging.style.top = event.clientY + 'px';
                    dragging.style.left = event.clientX - diffX + 'px';
                    dragging.style.top = event.clientY - diffY + 'px';
                }
                break;
            case 'mouseup':
                dragging = null;
                break;
        }
    }
    return {
        enable: function(event){
            EventUtil.addHandle(document,'mousedown',handleEvent);
            EventUtil.addHandle(document,'mousemove',handleEvent);
            EventUtil.addHandle(document,'mouseup',handleEvent);
        },
        disable: function(event){
            EventUtil.removeHandle(document,'mousedown',handleEvent);
            EventUtil.removeHandle(document,'mousemove',handleEvent);
            EventUtil.removeHandle(document,'mouseup',handleEvent);
        }
    }
}()

DragDrop.enable();