在一些交互性强的前端页面中,经常用到物件拖动,因此封装了一下拖动控件的代码。
使用时只需绑定htc拖动控件,然后设定一些可拖动控件(其position需设为absolute)的canMove属性(为1表示可以拖动),layernum属性(拖动时,移动哪一个父元件)
<!--
Author: Kw.Tsou
Date: 2005/11/26
Content: 为页面上的元件提供自由移动的功能
UseMark: 在body(或其它容器)上behavior此物件,然后在需要移动的物件上设置canMove = "1" ,如果不是移动本身,则可以设置layernum指向其父元素.(注意:该移动的物件的position必须为absolute)
-->
< PUBLIC:COMPONENT >
< PUBLIC:ATTACH EVENT ="onmousedown" ONEVENT ="move_eDown()" />
< PUBLIC:ATTACH EVENT ="onmouseup" ONEVENT ="move_eUp()" />
< PUBLIC:ATTACH EVENT ="onmousemove" ONEVENT ="move_eMove()" />
< PUBLIC:EVENT ID ="moveevent" NAME ="ontagmove" />
</ PUBLIC:COMPONENT >
< SCRIPT Language ="JavaScript" >
var current = null;
var offsetX = 0;
var offsetY = 0;
var dragging = false;
var startedDragging = false;
var ismove = false;
function setCurrent(w)
{
current = w;
if(current.style.position!="absolute"){
alert("可移动物件的position必须为absolute,才可更好地移动");
return;
}
var ex = event.clientX;
var ey = event.clientY;
offsetX = event.x - current.offsetLeft;
offsetY = event.y - current.offsetTop;
dragging = true;
ismove = false;
}
function moveCurrent()
{
if (!dragging || !current)
return;
if (event.button == 0)
{
releaseCurrent();
return;
}
if (!startedDragging)
{
startedDragging = true;
}
var ex = event.clientX;
var ey = event.clientY;
var newl = ex - offsetX;
var newt = ey - offsetY
if(newl!=current.style.pixelLeft||newt!=current.style.pixelTop){
current.style.pixelLeft = ex - offsetX;
current.style.pixelTop = ey - offsetY;
ismove = true;
}
window.event.returnValue = false;
window.event.cancelBubble = true;
}
function releaseCurrent()
{
current=null;
dragging = false;
startedDragging = false;
window.event.returnValue = false;
window.event.cancelBubble = true;
}
//取得移动对象(如只能拖动标题栏进行移动)
function getOpreateElement(el){
//debug();
var ret = el;
var layernum = 0;
if(el.layernum)
layernum = parseInt(el.layernum);
for(var i=0;i<layernum;i++)
{
ret = ret.parentElement;
}
return ret;
}
function move_eDown()
{
var e = window.event;
var el = e.srcElement;
if(el.canMove=="1"){
el = getOpreateElement(el);
if(!el.isLock){
if(!(el.isResize=="1"&&el.runtimeStyle.cursor.indexOf("resize")>0))
setCurrent(el);
}
}
}
function move_eUp()
{
var tmp =null;
if(current!=null)
tmp = current;
releaseCurrent();
if(tmp!=null&&ismove){
var evt = createEventObject();
evt.src = tmp;
try { moveevent.fire(evt); } catch(e) {};
}
ismove = false;
tmp = null;
}
function move_eMove()
{
moveCurrent();
}
</ SCRIPT >
Author: Kw.Tsou
Date: 2005/11/26
Content: 为页面上的元件提供自由移动的功能
UseMark: 在body(或其它容器)上behavior此物件,然后在需要移动的物件上设置canMove = "1" ,如果不是移动本身,则可以设置layernum指向其父元素.(注意:该移动的物件的position必须为absolute)
-->
< PUBLIC:COMPONENT >
< PUBLIC:ATTACH EVENT ="onmousedown" ONEVENT ="move_eDown()" />
< PUBLIC:ATTACH EVENT ="onmouseup" ONEVENT ="move_eUp()" />
< PUBLIC:ATTACH EVENT ="onmousemove" ONEVENT ="move_eMove()" />
< PUBLIC:EVENT ID ="moveevent" NAME ="ontagmove" />
</ PUBLIC:COMPONENT >
< SCRIPT Language ="JavaScript" >
var current = null;
var offsetX = 0;
var offsetY = 0;
var dragging = false;
var startedDragging = false;
var ismove = false;
function setCurrent(w)
{
current = w;
if(current.style.position!="absolute"){
alert("可移动物件的position必须为absolute,才可更好地移动");
return;
}
var ex = event.clientX;
var ey = event.clientY;
offsetX = event.x - current.offsetLeft;
offsetY = event.y - current.offsetTop;
dragging = true;
ismove = false;
}
function moveCurrent()
{
if (!dragging || !current)
return;
if (event.button == 0)
{
releaseCurrent();
return;
}
if (!startedDragging)
{
startedDragging = true;
}
var ex = event.clientX;
var ey = event.clientY;
var newl = ex - offsetX;
var newt = ey - offsetY
if(newl!=current.style.pixelLeft||newt!=current.style.pixelTop){
current.style.pixelLeft = ex - offsetX;
current.style.pixelTop = ey - offsetY;
ismove = true;
}
window.event.returnValue = false;
window.event.cancelBubble = true;
}
function releaseCurrent()
{
current=null;
dragging = false;
startedDragging = false;
window.event.returnValue = false;
window.event.cancelBubble = true;
}
//取得移动对象(如只能拖动标题栏进行移动)
function getOpreateElement(el){
//debug();
var ret = el;
var layernum = 0;
if(el.layernum)
layernum = parseInt(el.layernum);
for(var i=0;i<layernum;i++)
{
ret = ret.parentElement;
}
return ret;
}
function move_eDown()
{
var e = window.event;
var el = e.srcElement;
if(el.canMove=="1"){
el = getOpreateElement(el);
if(!el.isLock){
if(!(el.isResize=="1"&&el.runtimeStyle.cursor.indexOf("resize")>0))
setCurrent(el);
}
}
}
function move_eUp()
{
var tmp =null;
if(current!=null)
tmp = current;
releaseCurrent();
if(tmp!=null&&ismove){
var evt = createEventObject();
evt.src = tmp;
try { moveevent.fire(evt); } catch(e) {};
}
ismove = false;
tmp = null;
}
function move_eMove()
{
moveCurrent();
}
</ SCRIPT >
<
html
>
< head >
< title > 什么都可以拖动 </ title >
< style >
body,div,td,font{}{font:menu;}
div,td{}{text-align:center}
</ style >
</ head >
< body style ="margin:0px" >
< div ontagmove ="window.status=' left:' + window.event.src.offsetLeft + ' top:' + window.event.src.offsetTop" style ="margin:3px;position:absolute;overflow:hidden;behavior:url(BlogMoveAble.htc);border:1px solid gray;width:90%;height:90%;background-color:#efefef" >
< div canMove = "1" style ="background-color:gray;border:1px solid red;cursor:move;top:20px;left:20px;position:absolute;width:100px;height:100px;" >
这是一个div
</ div >
< div style ="background-color:#e1e1e1;border:1px solid blue;;top:120px;left:120px;position:absolute;width:180px;height:120px;" >
< div style ="height:30px;border:1px solid white;background-color:white;color:black;cursor:move" canMove ="1" layernum ="1" > 只有标题可以拖动 </ div >
这是一个div
</ div >
< table border ="1" bordercolor ="green" style ="width:50%;height:50%;position:absolute" >
< tr >
< td canMove ="1" layernum ="3" colspan ="2" style ="cursor:move;background-color:blue;color:white" > 这是表格的标题行 </ td >
</ tr >
< tr >
< td > 1 </ td >
< td > 2 </ td >
</ tr >
< tr >
< td > 3 </ td >
< td > 4 </ td >
</ tr >
</ table >
</ div >
</ body >
</ html >
< head >
< title > 什么都可以拖动 </ title >
< style >
body,div,td,font{}{font:menu;}
div,td{}{text-align:center}
</ style >
</ head >
< body style ="margin:0px" >
< div ontagmove ="window.status=' left:' + window.event.src.offsetLeft + ' top:' + window.event.src.offsetTop" style ="margin:3px;position:absolute;overflow:hidden;behavior:url(BlogMoveAble.htc);border:1px solid gray;width:90%;height:90%;background-color:#efefef" >
< div canMove = "1" style ="background-color:gray;border:1px solid red;cursor:move;top:20px;left:20px;position:absolute;width:100px;height:100px;" >
这是一个div
</ div >
< div style ="background-color:#e1e1e1;border:1px solid blue;;top:120px;left:120px;position:absolute;width:180px;height:120px;" >
< div style ="height:30px;border:1px solid white;background-color:white;color:black;cursor:move" canMove ="1" layernum ="1" > 只有标题可以拖动 </ div >
这是一个div
</ div >
< table border ="1" bordercolor ="green" style ="width:50%;height:50%;position:absolute" >
< tr >
< td canMove ="1" layernum ="3" colspan ="2" style ="cursor:move;background-color:blue;color:white" > 这是表格的标题行 </ td >
</ tr >
< tr >
< td > 1 </ td >
< td > 2 </ td >
</ tr >
< tr >
< td > 3 </ td >
< td > 4 </ td >
</ tr >
</ table >
</ div >
</ body >
</ html >
预览: