简单的Dom拖动Dome

来源：互联网发布：c语言好不好学编辑：程序博客网时间：2024/05/22 09:04

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd"><html><head>    <title></title>   <!-- <script type="text/javascript" src="jquery-1.2.6.js"></script>-->    <script type="text/javascript" src="cssJs.js"></script> <!--http://blog.csdn.net/xxb2008/article/details/9137621--></head><style type="text/css">    .content { margin: 0 auto; width: 400px; height: 300px; padding: 10px; margin: 10px; border: 10px solid black;        position: relative;}    .clientBox{padding: 10px; margin: 10px; cursor: move;  width: 10px; overflow: hidden; height: 10px; border: 10px solid red;        position: absolute; left: 0px;top:0px;background: white}    #msg{position: fixed;right: 0; top: 20px}</style><body><div class="content">    <div class="clientBox" id="clientBox"></div></div><div id="msg"></div></body></html>

<script type="text/javascript">    var Event = {        addEventListener:function (target, type, listener) {            var _type = "on" + type;            if (target.attachEvent) { //ie                target.attachEvent(_type, listener);            } else if (target.addEventListener) { //ff                target.addEventListener(type, listener, false);            } else {                target[_type] = listener;            }        },        removeEventListener:function (target, type, listener) {            var _type = "on" + type;            if (target.detachEvent) { //ie                target.detachEvent(_type, listener);            } else if (target.removeEventListener) { //ff                target.removeEventListener(type, listener, false);            } else {                target[_type] = null;            }        },        fix:function (event) {            event = window.event || event;            var e = {                originalEvent:event            }            for (var i in event) {                e[i] = event[i];            }            if (!e.pageX) {                var doc = document.documentElement, body = document.body;                  e.pageX = event.clientX + (doc && doc.scrollLeft || body && body.scrollLeft || 0)            - (doc && doc.clientLeft || body && body.clientLeft || 0);                                  e.pageY = event.clientY + (doc && doc.scrollTop || body && body.scrollTop || 0)            - (doc && doc.clientTop || body && body.clientTop || 0);                          }            e.preventDefault = function () {                if (this.originalEvent.preventDefault)                    this.originalEvent.preventDefault();                this.originalEvent.returnValue = false;            };            e.stopPropagation = function () {                if (this.originalEvent.stopPropagation)                    this.originalEvent.stopPropagation();                this.originalEvent.cancelBubble = true;            };            return e;        },        callEvent : function(obj, func){            return function(event){                return func.call(obj,Event.fix(event));            }        },        apply : function(obj, func){            return function() {                return func.apply(obj, arguments);            }        }    }    var Dom = {        $:function (id) {            return typeof id === "string" ? document.getElementById(id) : id;        }    }    function Drag(boxId){        this.init(boxId);    };    Drag.prototype = {        box:null,        x:0,        y:0,        isIE:(document.all) ? true : false,        init:function (boxId) {            this.box = Dom.$(boxId);            this._mouseDown = Event.callEvent(this, this.mouseDown);            this._move = Event.callEvent(this, this.move);            this._mouseUp = Event.callEvent(this, this.mouseUp);            Event.apply(this, this.start)();        },        move:function (event) {            event = Event.fix(event);            event.preventDefault();            event.stopPropagation();            //清除选择            window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();            this.box.style.left = event.pageX - this.x + "px";            this.box.style.top = event.pageY - this.y + "px";        },        mouseDown:function (event) {            event = Event.fix(event);            event.preventDefault();            event.stopPropagation();            /*box的top,left为0，margin为10,offsetLeft包含了margin，所在要加回来--IE需要再加clientLeft*/            //this.x = event.pageX - this.box.offsetLeft + parseInt(CssJs.get(this.box, "marginLeft"));            //this.y = event.pageY - this.box.offsetTop + parseInt(CssJs.get(this.box, "marginTop"));            this.x = event.pageX - parseInt(CssJs.get(this.box, "left"));            this.y = event.pageY - parseInt(CssJs.get(this.box, "top"));            Event.addEventListener(document, "mousemove", this._move);            Event.addEventListener(document, "mouseup", this._mouseUp);            if (this.isIE) {                Event.addEventListener(this.box, "losecapture", this._mouseUp);//焦点丢失                this.box.setCapture(); //设置鼠标捕获            } else {                Event.addEventListener(window, "blur", this._mouseUp);//焦点丢失            }        },        mouseUp:function (event) {            this.stop();        },        stop:function () {            if (this.isIE) {                Event.removeEventListener(this.box, "losecapture", this._mouseUp);//焦点丢失                this.box.releaseCapture(); //设置鼠标捕获            } else {                Event.removeEventListener(window, "blur", this._mouseUp);//焦点丢失            }            Event.removeEventListener(document, "mousemove", this._move);            Event.removeEventListener(document, "mouseup", this._mouseUp);        },        start:function () {            Event.addEventListener(this.box, "mousedown", this._mouseDown);        }    }    new Drag("clientBox");    /*     box的top,left为0，margin为10,offsetLeft包含了margin，所在要加回来     this.x = event.pageX - this.box.offsetLeft  +  parseInt(CssJs.get(this.box,"marginLeft"));     this.y = event.pageY - this.box.offsetTop +  parseInt(CssJs.get(this.box,"marginTop"));   */</script>