web拖动Drag&Drop原理

 

< html >
< head >
< title > Page Title </ title >
< style > ...

.drag {...}{
    cursor: move;
}



.box {...}{
    margin: 0px;
    width: 200px;
    border: 1px solid #ccc;
}
.box h3.title {...}{
    margin: 0px;
    width: 100%;
    background-color: #ccc;
}
.box div.content {...}{
    margin: 0px;
    width: 100%;
    text-align: left;
}
</ style >

< script  type ="text/javascript" > ...
//GreatGhoul
//兼容ff, ie
//要拖动的对象的title设置为'dragable'
//拖动点的class设置为'drag'，拖动点必须为可拖动对象的子节点

var DragableObj = ...{
    handle: null,
    dx: 0,
    dy: 0,

    init: function(e) ...{
        e = e || event;
        this.handle = e.target || e.srcElement;
        if (this.handle.className.indexOf('drag') == -1) return;
        while (this.handle.tagName != 'HTML' && this.handle.title != "dragable") ...

           {
            this.handle = this.handle.parentNode || this.handle.parentElement;
        }
        if (this.handle.title != 'dragable') return;
        this.handle.style.position = 'relative';
        this.dx = parseInt(this.handle.style.left + 0) - e.clientX;
        this.dy = parseInt(this.handle.style.top  + 0) - e.clientY;
        document.onmousemove = DragableObj.drag;
    },
    drag: function(e) ...{
        e = e || event;
        if (this.handle != null) ...{
            this.handle.style.left = (e.clientX + this.dx) + 'px';
            this.handle.style.top  = (e.clientY + this.dy) + 'px';
        }
    },
    drop: function(e) ...{
        this.handle = null;
        document.onmousemove = null;
    }
};
document.onmousedown = DragableObj.init;
document.onmouseup   = DragableObj.drop;
document.onselectstart = function(e) ...{
    e = e || event;
    eo = e.target || event.srcElement;
    if (eo.className.indexOf('drag') != -1) return false;
};

</ script >
</ head >
< body >
< br > 例１：
< div  class ="box"  title ="dragable" >
< h3  class ="drag title" >拖动标题 </ h3 >
< div  class ="content" >内容 </ div >
</ div >

< br > 例２：
< div  class ="drag"  title ="dragable" > 拖动我 </ div >

</ body >
</ html >