SOURCE

var DragDrop = function() {
    
    var dragging = null;
        diffX = 0;
        diffY = 0;

	function handleEvent(event) {
		// 获取目标元素
        var target = event.target;

        // 确定事件类型
        switch(event.type) {
            case "mousedown":
            	if (target.className.indexOf("draggable") > -1) {
                   dragging = target; 
                   diffX = event.clientX - target.offsetLeft;
                   diffY = event.clientY - target.offsetTop;
                }
                break;

            case "mousemove":
            	if (dragging !== null) {
					dragging.style.left = event.clientX - diffX + "px";
                    dragging.style.top = event.clientY - diffY + "px";
                }
                break;
            
            case "mouseup":
            	dragging = null;
                break;
        }
    }

    // 公共接口
    return {
        enable: function() {
			document.addEventListener("mousedown", handleEvent);
            document.addEventListener("mousemove", handleEvent);
            document.addEventListener("mouseup", handleEvent);            
        },
		disable: function() {
            document.removeEventListener("mousedown", handleEvent);
            document.removeEventListener("mousemove", handleEvent);
            document.removeEventListener("mouseup", handleEvent);
        }
    }
}();

DragDrop.enable();

<div class="draggable" style="position:absolute;background:red;width:50px;height:50px;"></div>
<div class="draggable" style="position:absolute;background:greenyellow;width:60px;height:60px;"></div>