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 " )
< 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 > 例1:
< div class ="box" title ="dragable" >
< h3 class ="drag title" >拖动标题 </ h3 >
< div class ="content" >内容 </ div >
</ div >
< br > 例2:
< div class ="drag" title ="dragable" > 拖动我 </ div >
</ body >
</ html >
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 > 例1:
< div class ="box" title ="dragable" >
< h3 class ="drag title" >拖动标题 </ h3 >
< div class ="content" >内容 </ div >
</ div >
< br > 例2:
< div class ="drag" title ="dragable" > 拖动我 </ div >
</ body >
</ html >