分享
 
 
 

Javascript 元素拖曳操作 By shawl.qiu (兼容IE,Opera,Firefox)

王朝html/css/js·作者佚名  2006-11-16
窄屏简体版  字體: |||超大  

Javascript 元素拖曳操作 By shawl.qiu (兼容IE,Opera,Firefox)

说明:

拖曳流程

鼠标按下->(鼠标移动->元素移动)

鼠标按键弹起->元素停止移动

针对 IE, 主要使用 obj.attachEvent() && obj.detachEvent()

针对 Firefox 主要使用 DOM 2 的 obj.addEventListener() && obj.removeEventListener

Opera 以上两种方法都支持

在本文中, 需要拖曳的元素必须指定style 属性为 position:absolute;

且应指定 left && top 的坐标值, 如:

linenum

<div style=" border:1px dashed blue; width: 180px; text-align:center; position:absolute; left:100px; top: 150px;" onmousedown="fDragging(this, event, true);">

element 1<br/>

dragging compatibility for IE, Opera, Firefox.

</div>

函数 fDragging(obj, e, limit) 的各参数解释:

obj: HTML元素对象, 要拖曳的元素

e: 指定为 event 对象, 主要为兼容 Firefox

limit: 布尔值, 指定是否只能在父元素中拖曳, false 可移动至任何位置.

函数 fDragging(obj, e, limit) 应该在 HTML onmousedown 属性 下使用, 如:

linenum

<div style=" border:1px dashed blue; width: 180px; text-align:center; position:absolute; left:50px; top: 50px;" onmousedown="fDragging(this, event, true);">

element <br/>

dragging compatibility for IE, Opera, Firefox.

</div>

shawl.qiu

2006-11-10

http://blog.csdn.net/btbtd

函数: fDragging(obj, e, limit) 及使用演示

linenum

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns=" http://www.w3.org/1999/xhtml">

<!-- DW6 -->

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>shawl.qiu template</title>

<script type="text/javascript">

//<![CDATA[

function fDragging(obj, e, limit){

if(!e) e=window.event;

var x=parseInt(obj.style.left);

var y=parseInt(obj.style.top);

var x_=e.clientX-x;

var y_=e.clientY-y;

if(document.addEventListener){

document.addEventListener('mousemove', inFmove, true);

document.addEventListener('mouseup', inFup, true);

} else if(document.attachEvent){

document.attachEvent('onmousemove', inFmove);

document.attachEvent('onmouseup', inFup);

}

inFstop(e);

inFabort(e)

function inFmove(e){

var evt;

if(!e)e=window.event;

if(limit){

var op=obj.parentNode;

var opX=parseInt(op.style.left);

var opY=parseInt(op.style.top);

if((e.clientX-x_)<0) return false;

else if((e.clientX-x_+obj.offsetWidth+opX)>(opX+op.offsetWidth)) return false;

if(e.clientY-y_<0) return false;

else if((e.clientY-y_+obj.offsetHeight+opY)>(opY+op.offsetHeight)) return false;

//status=e.clientY-y_;

}

obj.style.left=e.clientX-x_+'px';

obj.style.top=e.clientY-y_+'px';

inFstop(e);

} // shawl.qiu script

function inFup(e){

var evt;

if(!e)e=window.event;

if(document.removeEventListener){

document.removeEventListener('mousemove', inFmove, true);

document.removeEventListener('mouseup', inFup, true);

} else if(document.detachEvent){

document.detachEvent('onmousemove', inFmove);

document.detachEvent('onmouseup', inFup);

}

inFstop(e);

} // shawl.qiu script

function inFstop(e){

if(e.stopPropagation) return e.stopPropagation();

else return e.cancelBubble=true;

} // shawl.qiu script

function inFabort(e){

if(e.preventDefault) return e.preventDefault();

else return e.returnValue=false;

} // shawl.qiu script

}

//]]>

</script>

</head>

<body>

<div style=" border:1px dashed blue; width: 760px; height:600px; text-align:center; position:absolute; left:100px; top: 10px;"> this parent

<div style=" border:1px dashed blue; width: 180px; text-align:center; position:absolute; left:50px; top: 50px;" onmousedown="fDragging(this, event, true);">

element <br/>

dragging compatibility for IE, Opera, Firefox.

</div>

<div style=" border:1px dashed blue; width: 180px; text-align:center; position:absolute; left:100px; top: 150px;" onmousedown="fDragging(this, event, true);">

element 1<br/>

dragging compatibility for IE, Opera, Firefox.

</div>

<div style=" border:1px dashed blue; width: 180px; text-align:center; position:absolute; left:200px; top: 250px;" onmousedown="fDragging(this, event, false);">

element 2<br/>

dragging compatibility for IE, Opera, Firefox. <br/>

<font color="red">dragging everywhere</font>

</div>

</div>

</body>

</html>

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有