js拖拽

最新推荐文章于 2024-01-26 11:16:33 发布

liqi___123

最新推荐文章于 2024-01-26 11:16:33 发布

阅读量81

点赞数

分类专栏： javascript 文章标签： UP JavaScript ViewUI

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/liqi___123/article/details/83664476

版权

javascript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<style>

.dragArea{
background-color:blue;
filter:alpha(opacity=50);
-moz-opacity:0.5;
}

body{
margin:0px;
}
</style>
<body>
<div style="top:0px;left:0px;width:100px;height:100px;position:absolute;background:black;" onselectstart="return false;"
οnmοusedοwn="mousedown.apply(this,arguments);">
</div>
</body>
<script type="text/javascript">
/***********************************************************************
* 函数名：startdrag
* 说明：开始一段拖动行为，检查拖动行为的过程和终止并响应相应的事件。
* 参数：
* parent DOM对象，拖动所属的父对象，必需是容器，可以为document.body
* onmove 函数对象，事件，拖动开始后，鼠标移动触发事件
* onfinish 函数对象，事件，拖动结束时，触发事件一次
* area 对象，可以缺省，必须包含4个属性top left width height，以指定鼠标移动的有效范围，默认值为parent的全部范围。
***********************************************************************/

function startdrag(parent,onmove,onfinish,area)
{
var up,out,over;

var divarea=document.createElement("div");
if(!area)area={
"top":"0px",
"left":"0px",
"width":"100%",
"height":"100%"
}
divarea.style.position="absolute";
divarea.style.top=area.top;
divarea.style.left=area.left;
divarea.style.width=area.width;
divarea.style.height=area.height;
divarea.style.overflow="hidden";
divarea.style.zIndex="10000";
divarea.className="dragArea";
parent.appendChild(divarea);

if(divarea.attachEvent)
{
divarea.attachEvent("onmousemove",onmove)
document.attachEvent("onmouseup",up=function(){
divarea.detachEvent("onmousemove",onmove);
document.detachEvent("onmouseup",up);
divarea.detachEvent("onmouseout",out);
parent.removeChild(divarea);
onfinish(event||arguments[0]);
});
divarea.attachEvent("onmouseout",out=function(){
divarea.detachEvent("onmousemove",onmove);
document.detachEvent("onmouseup",up);
divarea.detachEvent("onmouseout",out);
parent.removeChild(divarea);
onfinish(event||arguments[0]);

});
}

else if(divarea.addEventListener)
{
divarea.addEventListener("mousemove",onmove,true);
document.addEventListener("mouseup",up=function(){
divarea.removeEventListener("mousemove",onmove,true);
document.removeEventListener("mouseup",up,true);
divarea.removeEventListener("mouseout",out,true);
parent.removeChild(divarea);
onfinish(event||arguments[0]);
},true);
divarea.addEventListener("mouseout",out=function(){
//alert("out");
divarea.removeEventListener("mousemove",onmove,true);
document.removeEventListener("mouseup",up,true);
divarea.removeEventListener("mouseout",out,true);
parent.removeChild(divarea);
onfinish(event||arguments[0]);
},true);
}

}
</script>
<script type="text/javascript">
function mousedown()
{
var e=arguments[0]||event;
var me=this;
var dy=e.clientY-parseInt(me.style.top);
var dx=e.clientX-parseInt(me.style.left);
startdrag(
document.body,
function(e){
e=e||event;
if(e.clientY-dy<0||e.clientY-dy>parseInt(document.body.clientHeight)-100)return;
if(e.clientX-dx<0||e.clientX-dx>parseInt(document.body.clientWidth)-100)return;
me.style.top=e.clientY-dy;
me.style.left=e.clientX-dx;
},
function(e){
}
);
}
</script>

原网址：http://www.aspxhome.com/download/javascript/20085/36734.htm

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。