实现页面元素拖动效果的JS函数
2010-12-14 16:52
851 查看
<!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">
<head runat="server">
<title>Untitled Page</title>
<style type="text/css">
<!--
#apDiv1 {
position:absolute;
left:31px;
top:21px;
width:220px;
height:58px;
z-index:5;
background-color: #FFFFD7;
border: 1px dashed #000000;
}
#apDiv2 {
position:relative;
left:523px;
top:126px;
width:246px;
height:144px;
background-color: #FFFFff;
border: 1px dashed #000000;
}
-->
</style>
<script language="javascript" type="text/javascript">
//<![CDATA[
//通用 移动 Div 类
//请保留一下我的信息,谢谢
//Edit By Skybot
//QQ:35287352
function Tong_MoveDiv()
{ //参数说明
// id 要移动的层ID
// Evt 是 event, window.event; 要在FF 中可以用 e ? e :window.event;
// T 为 int 有数字是拖动 没有是变大小
// Panel 为可选的函数 拖动后目标的容器 id
// fun为处理的方法
this.Move=function(Id,Evt,T,Panel,fun)
{
if(Id=="") return;
var o = document.getElementById(Id);
if(!o) return;//如果这个东东不在
evt = Evt ? Evt : window.event;
o.style.position = "absolute";//设定他的样式为绝对定位
o.style.zIndex = 200;//这里显示上下的
var obj = evt.srcElement ? evt.srcElement : evt.target; //得到个原素 使它在FF中也可以用
//得到当前对要移动对象的 坐标
var w = o.offsetWidth;
var h = o.offsetHeight;
var l = o.offsetLeft;
var t = o.offsetTop;
var div = document.createElement("DIV");//新原素DIV
document.body.appendChild(div);
div.style.cssText = "filter:alpha(Opacity=10,style=0);opacity:0.2;width:"+w+"px;height:"+h+"px;top:"+t+"px;left:"+l+"px;position:absolute;background:#000";//设定 filter； 注意opacity 是FF中的 Opacity
div.setAttribute("id", Id +"temp");
if(T)//看看是拖动还是 变大小
{
//看看是不是有拖动的后感应区事件
if(Panel==undefined)
{
this.Move_OnlyMove(Id,evt);
}
else//有感应区
{
if(fun==undefined)
{
this.Move_OnlyMove(Id,evt,Panel);
}
else
{
this.Move_OnlyMove(Id,evt,Panel,fun);
}
}
}
else
{
}
}
//移动函数
//参数 Id 要移动的层ID
//Evt 是 event, window.event; 要在FF 中可以用 e ? e :window.event;
this.Move_OnlyMove = function(Id,Evt,Panel,fun)
{
var
4000
o = document.getElementById(Id+"temp");
if(!o) return;
evt = Evt?Evt:window.event;//都是FF 才要这么写的
var relLeft = evt.clientX - o.offsetLeft;//得到左边的 宽度
var relTop = evt.clientY - o.offsetTop;//得到上边的 宽度
//抓取 事件
if (!window.captureEvents)
{
o.setCapture(); //指定 抓取 事件
}
else
{
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
}
//文档的 onmousemove 事件
document.onmousemove = function(e)
{
if (!o) return;
e = e ? e : window.event;
if (e.clientX - relLeft <= 0)
o.style.left = 0 +"px";
else if (e.clientX - relLeft >= document.documentElement.clientWidth - o.offsetWidth - 2)
o.style.left = (document.documentElement.clientWidth - o.offsetWidth - 2) +"px";
else
o.style.left = e.clientX - relLeft +"px";
if (e.clientY - relTop <= 1)
o.style.top = 1 +"px";
else if (e.clientY - relTop >= document.documentElement.clientHeight - o.offsetHeight - 30)
o.style.top = (document.documentElement.clientHeight - o.offsetHeight - 30) +"px";
else
o.style.top = e.clientY - relTop +"px";
//加入拖动所感应区
if(Panel!=undefined)
{
try
{
MyMove.Move_evt(Panel,e);
}
catch(e)
{
}
}
}
//文档的 onmouseup 事件
document.onmouseup = function(e)//eFF里的事件
{
if (!o) return;
if (!window.captureEvents)
o.releaseCapture();
else
window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);
var o1 = document.getElementById(Id);
if (!o1) return;
var l0 = o.offsetLeft;
var t0 = o.offsetTop;
var l = o1.offsetLeft;
var t = o1.offsetTop;
MyMove.Move_e(Id, l0 , t0, l, t);
document.body.removeChild(o);
o = null;
var e = e ? e : window.event;//得到当前的事件
//加入拖动所感应区
if(Panel!=undefined)
{
try
{
if(fun==undefined)
{
MyMove.Move_evt(Panel,e);
}
else
{
MyMove.Move_evt(Panel,e,fun);
}
}
catch(e)
{
}
}
}
}
this.Move_e = function(Id, l0 , t0, l, t)
{
if (typeof(window["ct"+ Id]) != "undefined") clearTimeout(window["ct"+ Id]);
var o = document.getElementById(Id);
if (!o) return;
var sl = st = 8;
var s_l = Math.abs(l0 - l);
var s_t = Math.abs(t0 - t);
if (s_l - s_t > 0)
if (s_t)
sl = Math.round(s_l / s_t) > 8 ? 8 : Math.round(s_l / s_t) * 6;
else
sl = 0;
else
if (s_l)
st = Math.round(s_t / s_l) > 8 ? 8 : Math.round(s_t / s_l) * 6;
else
st = 0;
if (l0 - l < 0) sl *= -1;
if (t0 - t < 0) st *= -1;
if (Math.abs(l + sl - l0) < 52 && sl) sl = sl > 0 ? 2 : -2;
if (Math.abs(t + st - t0) < 52 && st) st = st > 0 ? 2 : -2;
if (Math.abs(l + sl - l0) < 16 && sl) sl = sl > 0 ? 1 : -1;
if (Math.abs(t + st - t0) < 16 && st) st = st > 0 ? 1 : -1;
if (s_l == 0 && s_t == 0) return;
if (Math.abs(l + sl - l0) < 2)
o.style.left = l0 +"px";
else
o.style.left = l + sl +"px";
if (Math.abs(t + st - t0) < 2)
o.style.top = t0 +"px";
else
o.style.top = t + st +"px";
window["ct"+ Id] = window.setTimeout("MyMove.Move_e('"+ Id +"', "+ l0 +" , "+ t0 +", "+ (l + sl) +", "+ (t + st) +")", 1);
}
}
//对它拖动类进行封装
Tong_MoveDiv.prototype={
Move_evt
:function(ssid,Evt,fun)
{/// <summary>
/// 传入范围的 容器ID
/// 返回鼠标当前的位置是不是在
/// 传入的范围内
// 当鼠标松开时如果也在 范围内则执行 传入的方法 fun
/// </summary>
///<param name="ssid">容器ID</param>
var obj = document.getElementById(ssid);//将传入ID转成对象
var t = obj.offsetHeight;//相对高度 : obj.offsetWidth//当前对象的宽度
var l =+obj.offsetWidth;//相对的左边 : obj.offsetHeight//当前对象的高度
var e = Evt ? Evt : window.event;//得到当前鼠标或事件的位置 这里是鼠标
var evt = e ? e : window.event;
//得到当前的鼠标的位置
var m_l = evt.clientX-obj.offsetLeft;
var m_t= evt.clientY-obj.offsetTop;
try
{
//在容器里
if(m_l<=l&&m_t<=t&&m_l>0&&m_t>0)
{
obj.style.backgroundColor="#FFFFD7";
if(fun!=undefined)
{
eval(fun);//执行传入函数
}
}
else
{
obj.style.backgroundColor="#ffffff";
}
}
catch(e)
{
alert(e);
}
}
}
var MyMove = new Tong_MoveDiv();
//----------------------------------
function cu(objid)
{
alert('ddd');
alert(document.getElementById(objid).innerHTML);
}
// ]]>
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="apDiv1" onmousedown="MyMove.Move('apDiv1',event,1,'apDiv2','cu(/'pp/')');" style="cursor:move;">
拖动</div>
<div id="Div3" onmousedown="MyMove.Move('Div3',event,1);" style="cursor:move;">
拖动拖动
这个层没有事件属性
</div>
<div id="apDiv2">
我是 感应区
拖动黄色的“拖动”层到我上面会有事件哦
</div>
</div>
<div id="pp">dfsfds<br/></div>
</form>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<style type="text/css">
<!--
#apDiv1 {
position:absolute;
left:31px;
top:21px;
width:220px;
height:58px;
z-index:5;
background-color: #FFFFD7;
border: 1px dashed #000000;
}
#apDiv2 {
position:relative;
left:523px;
top:126px;
width:246px;
height:144px;
background-color: #FFFFff;
border: 1px dashed #000000;
}
-->
</style>
<script language="javascript" type="text/javascript">
//<![CDATA[
//通用 移动 Div 类
//请保留一下我的信息,谢谢
//Edit By Skybot
//QQ:35287352
function Tong_MoveDiv()
{ //参数说明
// id 要移动的层ID
// Evt 是 event, window.event; 要在FF 中可以用 e ? e :window.event;
// T 为 int 有数字是拖动 没有是变大小
// Panel 为可选的函数 拖动后目标的容器 id
// fun为处理的方法
this.Move=function(Id,Evt,T,Panel,fun)
{
if(Id=="") return;
var o = document.getElementById(Id);
if(!o) return;//如果这个东东不在
evt = Evt ? Evt : window.event;
o.style.position = "absolute";//设定他的样式为绝对定位
o.style.zIndex = 200;//这里显示上下的
var obj = evt.srcElement ? evt.srcElement : evt.target; //得到个原素 使它在FF中也可以用
//得到当前对要移动对象的 坐标
var w = o.offsetWidth;
var h = o.offsetHeight;
var l = o.offsetLeft;
var t = o.offsetTop;
var div = document.createElement("DIV");//新原素DIV
document.body.appendChild(div);
div.style.cssText = "filter:alpha(Opacity=10,style=0);opacity:0.2;width:"+w+"px;height:"+h+"px;top:"+t+"px;left:"+l+"px;position:absolute;background:#000";//设定 filter； 注意opacity 是FF中的 Opacity
div.setAttribute("id", Id +"temp");
if(T)//看看是拖动还是 变大小
{
//看看是不是有拖动的后感应区事件
if(Panel==undefined)
{
this.Move_OnlyMove(Id,evt);
}
else//有感应区
{
if(fun==undefined)
{
this.Move_OnlyMove(Id,evt,Panel);
}
else
{
this.Move_OnlyMove(Id,evt,Panel,fun);
}
}
}
else
{
}
}
//移动函数
//参数 Id 要移动的层ID
//Evt 是 event, window.event; 要在FF 中可以用 e ? e :window.event;
this.Move_OnlyMove = function(Id,Evt,Panel,fun)
{
var
4000
o = document.getElementById(Id+"temp");
if(!o) return;
evt = Evt?Evt:window.event;//都是FF 才要这么写的
var relLeft = evt.clientX - o.offsetLeft;//得到左边的 宽度
var relTop = evt.clientY - o.offsetTop;//得到上边的 宽度
//抓取 事件
if (!window.captureEvents)
{
o.setCapture(); //指定 抓取 事件
}
else
{
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
}
//文档的 onmousemove 事件
document.onmousemove = function(e)
{
if (!o) return;
e = e ? e : window.event;
if (e.clientX - relLeft <= 0)
o.style.left = 0 +"px";
else if (e.clientX - relLeft >= document.documentElement.clientWidth - o.offsetWidth - 2)
o.style.left = (document.documentElement.clientWidth - o.offsetWidth - 2) +"px";
else
o.style.left = e.clientX - relLeft +"px";
if (e.clientY - relTop <= 1)
o.style.top = 1 +"px";
else if (e.clientY - relTop >= document.documentElement.clientHeight - o.offsetHeight - 30)
o.style.top = (document.documentElement.clientHeight - o.offsetHeight - 30) +"px";
else
o.style.top = e.clientY - relTop +"px";
//加入拖动所感应区
if(Panel!=undefined)
{
try
{
MyMove.Move_evt(Panel,e);
}
catch(e)
{
}
}
}
//文档的 onmouseup 事件
document.onmouseup = function(e)//eFF里的事件
{
if (!o) return;
if (!window.captureEvents)
o.releaseCapture();
else
window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);
var o1 = document.getElementById(Id);
if (!o1) return;
var l0 = o.offsetLeft;
var t0 = o.offsetTop;
var l = o1.offsetLeft;
var t = o1.offsetTop;
MyMove.Move_e(Id, l0 , t0, l, t);
document.body.removeChild(o);
o = null;
var e = e ? e : window.event;//得到当前的事件
//加入拖动所感应区
if(Panel!=undefined)
{
try
{
if(fun==undefined)
{
MyMove.Move_evt(Panel,e);
}
else
{
MyMove.Move_evt(Panel,e,fun);
}
}
catch(e)
{
}
}
}
}
this.Move_e = function(Id, l0 , t0, l, t)
{
if (typeof(window["ct"+ Id]) != "undefined") clearTimeout(window["ct"+ Id]);
var o = document.getElementById(Id);
if (!o) return;
var sl = st = 8;
var s_l = Math.abs(l0 - l);
var s_t = Math.abs(t0 - t);
if (s_l - s_t > 0)
if (s_t)
sl = Math.round(s_l / s_t) > 8 ? 8 : Math.round(s_l / s_t) * 6;
else
sl = 0;
else
if (s_l)
st = Math.round(s_t / s_l) > 8 ? 8 : Math.round(s_t / s_l) * 6;
else
st = 0;
if (l0 - l < 0) sl *= -1;
if (t0 - t < 0) st *= -1;
if (Math.abs(l + sl - l0) < 52 && sl) sl = sl > 0 ? 2 : -2;
if (Math.abs(t + st - t0) < 52 && st) st = st > 0 ? 2 : -2;
if (Math.abs(l + sl - l0) < 16 && sl) sl = sl > 0 ? 1 : -1;
if (Math.abs(t + st - t0) < 16 && st) st = st > 0 ? 1 : -1;
if (s_l == 0 && s_t == 0) return;
if (Math.abs(l + sl - l0) < 2)
o.style.left = l0 +"px";
else
o.style.left = l + sl +"px";
if (Math.abs(t + st - t0) < 2)
o.style.top = t0 +"px";
else
o.style.top = t + st +"px";
window["ct"+ Id] = window.setTimeout("MyMove.Move_e('"+ Id +"', "+ l0 +" , "+ t0 +", "+ (l + sl) +", "+ (t + st) +")", 1);
}
}
//对它拖动类进行封装
Tong_MoveDiv.prototype={
Move_evt
:function(ssid,Evt,fun)
{/// <summary>
/// 传入范围的 容器ID
/// 返回鼠标当前的位置是不是在
/// 传入的范围内
// 当鼠标松开时如果也在 范围内则执行 传入的方法 fun
/// </summary>
///<param name="ssid">容器ID</param>
var obj = document.getElementById(ssid);//将传入ID转成对象
var t = obj.offsetHeight;//相对高度 : obj.offsetWidth//当前对象的宽度
var l =+obj.offsetWidth;//相对的左边 : obj.offsetHeight//当前对象的高度
var e = Evt ? Evt : window.event;//得到当前鼠标或事件的位置 这里是鼠标
var evt = e ? e : window.event;
//得到当前的鼠标的位置
var m_l = evt.clientX-obj.offsetLeft;
var m_t= evt.clientY-obj.offsetTop;
try
{
//在容器里
if(m_l<=l&&m_t<=t&&m_l>0&&m_t>0)
{
obj.style.backgroundColor="#FFFFD7";
if(fun!=undefined)
{
eval(fun);//执行传入函数
}
}
else
{
obj.style.backgroundColor="#ffffff";
}
}
catch(e)
{
alert(e);
}
}
}
var MyMove = new Tong_MoveDiv();
//----------------------------------
function cu(objid)
{
alert('ddd');
alert(document.getElementById(objid).innerHTML);
}
// ]]>
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="apDiv1" onmousedown="MyMove.Move('apDiv1',event,1,'apDiv2','cu(/'pp/')');" style="cursor:move;">
拖动</div>
<div id="Div3" onmousedown="MyMove.Move('Div3',event,1);" style="cursor:move;">
拖动拖动
这个层没有事件属性
</div>
<div id="apDiv2">
我是 感应区
拖动黄色的“拖动”层到我上面会有事件哦
</div>
</div>
<div id="pp">dfsfds<br/></div>
</form>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 实现页面元素拖动效果的JS函数
- js实现div在页面拖动效果
- 页面滚动显示或隐藏元素Headroom.js插件帮助你实现滚动效果
- js实现div在页面拖动效果
- jquery实现页面控件拖动效果js代码
- JavaScript实现元素拖动效果
- 用js实现同一页面多个不同运动效果
- js实现一个可以兼容PC端和移动端的div拖动效果
- 原生js实现可拖动的登录框效果
- 使用原生js实现页面蒙灰(mask)效果示例代码
- JS实现的页面自定义滚动条效果
- js实现同一页面多个运动效果的方法
- JS实现元素拖动
- JS实现页面的拖动布局
- velocity.js实现页面滚动切换效果
- JS实现部分HTML固定页面顶部随屏滚动效果
- js实现类似MSN提示的页面效果代码分享
- JS 拖动效果实现代码 比较简单
- 在iframe里的页面编写js，实现在父窗口上创建动画效果展开和收缩的div（不变动iframe父窗口代码）
- js实现运动logo图片效果及运动元素对象sportBox使用方法