[Javascript]层的拖动

javascript

var Drag=
{
"obj":null,
"init":function(a, aRoot){
a.onmousedown=Drag.start;
a.root = aRoot;
if(isNaN(parseInt(a.root.style.left)))a.root.style.left="0px";
if(isNaN(parseInt(a.root.style.top)))a.root.style.top="0px";
a.root.onDragStart=new Function();
a.root.onDragEnd=new Function();
a.root.onDrag=new Function();
},
"start":function(a){
var b=Drag.obj=this;
a=Drag.fixE(a);
var c=parseInt(b.root.style.top);
var d=parseInt(b.root.style.left);
b.root.onDragStart(d,c,a.clientX,a.clientY);
b.lastMouseX=a.clientX;
b.lastMouseY=a.clientY;
document.onmousemove=Drag.drag;
document.onmouseup=Drag.end;
return false;
},
"drag":function(a){
a=Drag.fixE(a);
var b=Drag.obj;
var c=a.clientY;
var d=a.clientX;
var e=parseInt(b.root.style.top);
var f=parseInt(b.root.style.left);
var h,g;
h=f+d-b.lastMouseX;
g=e+c-b.lastMouseY;
b.root.style.left=h+"px";
b.root.style.top=g+"px";
b.lastMouseX=d;
b.lastMouseY=c;
b.root.onDrag(h,g,a.clientX,a.clientY);
return false;
},
"end":function(){
document.onmousemove=null;
document.onmouseup=null;
Drag.obj.root.onDragEnd(parseInt(Drag.obj.root.style.left),parseInt(Drag.obj.root.style.top));
Drag.obj=null;
},
"fixE":function(a){
if(typeof a=="undefined")a=window.event;
if(typeof a.layerX=="undefined")a.layerX=a.offsetX;
if(typeof a.layerY=="undefined")a.layerY=a.offsetY;
return a;
}
};

时间: 2025-01-04 14:18:28

[Javascript]层的拖动的相关文章

javascript实现可拖动变色并关闭层窗口实例

  本文实例讲述了javascript实现可拖动变色并关闭层窗口的方法.分享给大家供大家参考.具体分析如下: 这是一款基于javascript+CSS实现层拖动的代码,不同的是它在拖动的时候窗口会变色,使操作体验更好一些,你可以运行代码查看效果.它还可以显示/隐藏或关闭打开的效果,没事的时候推敲一下 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 3

javascript实现鼠标拖动改变层大小的方法

  文实例讲述了javascript实现鼠标拖动改变层大小的方法.分享给大家供大家参考.具体实现方法如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68

javascript实现可拖动变色并关闭层窗口实例_javascript技巧

本文实例讲述了javascript实现可拖动变色并关闭层窗口的方法.分享给大家供大家参考.具体分析如下: 这是一款基于javascript+CSS实现层拖动的代码,不同的是它在拖动的时候窗口会变色,使操作体验更好一些,你可以运行代码查看效果.它还可以显示/隐藏或关闭打开的效果,没事的时候推敲一下 <html> <head> <title>拖动窗口</title> <meta http-equiv="Content-Type" con

javascript实现鼠标拖动改变层大小的方法_javascript技巧

本文实例讲述了javascript实现鼠标拖动改变层大小的方法.分享给大家供大家参考.具体实现方法如下: <html> <head> <title>拖动改变层的大小</title> <meta content="text/html; charset=gb2312" http-equiv="Content-Type"> <style> { box-sizing: border-box; moz-b

Jquery 实现层的拖动,支持回调函数

最近在写一个CMS内容管理系统,前台基本是用ajax异步请求服务器,通过ashx处理,返回json格式处理.由于需要更加人性化的界面,所以采用到了拖动层的操作. 以下是拖动层的主要核心方法,本来想写成插件的,考虑的没那么多时间,就以方法的方式了. /*  * Jquery 鼠标左键拖动面板  * coder:新生帝  * obj:jQuery选择器名称  * callback:回调函数(拖动停止要执行的函数),可通过$(this)获取 obj 对象  */  function movePanel

JavaScript实现鼠标拖动效果的方法

  这篇文章主要介绍了最精简的JavaScript实现鼠标拖动效果的方法,可实现javascript控制鼠标拖动div层效果的方法,需要的朋友可以参考下 相对于其它的鼠标拖动效果,这款拖动特效还是比较精简的,而且它还支持鼠标吸附,不按鼠标左键它也可以会跟随鼠标移动;定义时候也相对方便,只用指定被拖动的DIV ID就可以了,扩展性很好. ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 3

JS实现动态移动层及拖动浮层关闭的方法

  本文实例讲述了JS实现动态移动层及拖动浮层关闭的方法.分享给大家供大家参考.具体实现方法如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 <html> <head> <title>动态移动的层</title> <body bgcolor=

javascript弹出拖动窗口_javascript技巧

可以拖动的弹出窗口,在很多网页上都可以见到,非常的人性化,下面通过一段javascript代码就可以实现弹出拖动窗口,废话不多说了,直接贴代码了. <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.jb51.net/" /> <title>

JS实现动态移动层及拖动浮层关闭的方法_javascript技巧

本文实例讲述了JS实现动态移动层及拖动浮层关闭的方法.分享给大家供大家参考.具体实现方法如下: <html> <head> <title>动态移动的层</title> <body bgcolor="#ADBAC9"> <div id="div1" class="yellow" style="VISIBILITY:visible ; background-color:#FF