拖放

拖放
拖放：就是点击某个对象，并按住鼠标按钮不放，将鼠标移动到另外一个区域，然后释放鼠标按钮将对象“放”在这里。
拖放的基本概念也很简单：创建一个绝对定位的元素，使其可以用鼠标移动。

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';
});

最简单的拖放界面可用以下代码实现：

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();

提问：
1.会检查target的class是否包含’box’类，这个技巧可以很方便地通过标记语言而非JavaScript脚本来确定可拖动的元素。

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

修缮拖动功能

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();