javascript之DIV拖动类支持在FF下拖动,调用简单- Javascript

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > javascript之DIV拖动类支持在FF下拖动,调用简单

Javascript: window.onload 加载完毕的问题及解决方案（下）; jQuery 版本的文本输入框检查器Input Check; jquery Firefox3.5中操作select的问题; jquery 1.3.2 IE8中的一点点的小问题解决方法; javascript div 遮罩层封锁整个页面; javascript 页面只自动刷新一次; Javascript 区别浏览器代码; checkbox 复选框不能为空; Prototype 学习 Prototype对象; Prototype 学习工具函数学习($方法); Prototype 学习工具函数学习($A方法); Prototype 学习工具函数学习($w,$F方法); Prototype Object对象学习; Prototype Function对象学习; Prototype Date对象学习; JavaScript 事件对象的实现; JavaScript 事件查询综合; JavaScript 继承详解（一）; JavaScript 继承详解（二）; JavaScript 继承详解（三）

No. « ‹ 145 146 147 148 › »

技术文章搜索

关键字

Javascript 中的 javascript之DIV拖动类支持在FF下拖动,调用简单

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-12 浏览: 165 ::

收藏到网摘: n/a

javascript下操作css的float属性的特殊写法 Expandable "Detail" Table Rows

调用方法
onmousedown="MyMove.Move('InfoKuang',event,1)"
想问的问题是:如何当我拖到一个指定的地方时层自动吸到指定地方.
相当于拖拽布局

点击运行可以看到效果:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Div Move Temp</title>
<style>
#InfoKuang { position:absolute; width:130px; height:85px; z-index:1; filter:alpha(Opacity=60,style=0); opacity:0.6; padding: 3px; border: 1px dashed #000000; z-index:5000; bottom:31px; font-size:9pt;
}
#InfoKuang ul { margin: 1px; padding: 0px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: none; border-right-style: none; border-bottom-style: solid; border-left-style: none; border-top-color: #000000; border-right-color: #000000; border-bottom-color: #000000; border-left-color: #000000; color: #000000; background-color:#0faead;
}
#InfoKuang li { height:24px; padding: 1px; line-height: 24px;
}
</style>
</head>
<body>
<div id="InfoKuang" onmousedown="MyMove.Move('InfoKuang',event,1)">
<span style="cursor:move;">点我调用 拖动窗口</span> <ul> <li> </li> </ul> <ul> <li> 显示窗口 </li> </ul> <ul> <li> 最大化窗口 </li> </ul>
</div>
</body>
<script language="javascript" type="text/javascript">
//通用 移动 Div 类
//请保留一下我的信息,谢谢
//Edit By Skybot
//QQ:35287352
function Tong_MoveDiv()
{ //参数说明 // id 要移动的层ID // Evt 是 event, window.event; 要在FF 中可以用 e ? e :window.event; // T 为 int 有数字是拖动 没有是变大小 this.Move=function(Id,Evt,T) { 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)//看看是拖动还是 变大小 { this.Move_OnlyMove(Id,evt); } else { } } //移动函数 //参数 Id 要移动的层ID //Evt 是 event, window.event; 要在FF 中可以用 e ? e :window.event; this.Move_OnlyMove = function(Id,Evt) { var 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"; } //文档的 onmouseup 事件 document.onmouseup = function() { 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; } } 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); }
}
var MyMove = new Tong_MoveDiv();
</script>
</html>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

javascript下操作css的float属性的特殊写法 Expandable "Detail" Table Rows

Javascript 中的 javascript之DIV拖动类 支持在FF下拖动,调用简单

评论 (0) All

Javascript 中的 javascript之DIV拖动类支持在FF下拖动,调用简单