web前端
数据库
编程语言
搜索技术
关于本站
登录
登 录
下次自动登录
学步园
返回顶部
查看留言
转到底部
现在的位置:
首页
> 综合 > 正文
RSS
JavaScript 拖拽实现（附注释），最经典简单短小精悍！
2013年06月29日
⁄ 综合
⁄ 共 27字 ⁄ 字号
小
中
大
⁄
评论关闭
效果预览：
实现源代码：
<div id="r" style="position:absolute; left:100px; top:100px; background-color:#F00; height:80px; width:80px; cursor: pointer;"></div> <div id="g" style="position:absolute; left:250px; top:100px; background-color:#0F0; height:80px; width:80px; cursor: pointer;"></div> <div id="b" style="position:absolute; left:400px; top:100px; background-color:#00F; height:80px; width:80px; cursor: pointer;"></div> <p><script type="text/javascript"><!-- var Drag = { //当前被drag的对象 obj: null, //初始化 init: function(id){ var o = document.getElementById(id); //当onmousedown开始拖拽 o.onmousedown = Drag.start; }, start: function(e){ var o = Drag.obj = this; //lastMouseX，lastMouseY记录上次鼠标的位置 o.lastMouseX = Drag.getEvent(e).x; o.lastMouseY = Drag.getEvent(e).y; //当onmousemove开始移动 document.onmousemove = Drag.move; //当onmouseup终止拖拽 document.onmouseup = Drag.end; }, move: function(e){ var o = Drag.obj; //dx, dy表示鼠标移动的距离 var dx = Drag.getEvent(e).x - o.lastMouseX; var dy = Drag.getEvent(e).y - o.lastMouseY; //因为element.style.left通常返回的结果是'200px'的形式，所以要用parseInt转化 var left = parseInt(o.style.left) + dx ; var top = parseInt(o.style.top) + dy; o.style.left = left; o.style.top = top; o.lastMouseX = Drag.getEvent(e).x; o.lastMouseY = Drag.getEvent(e).y; }, end: function(e){ document.onmousemove = null; document.onMouseup = null; Drag.obj = null; }, //辅助函数，处理IE和FF不同的event模型 getEvent: function(e){ if (typeof e == 'undefined'){ e = window.event; } //alert(e.x?e.x : e.layerX); if(typeof e.x == 'undefined'){ ee.x = e.layerX;//复制了n遍，到了csdn就变成ee.x了 } if(typeof e.y == 'undefined'){ ee.y = e.layerY;//复制了n遍，到了csdn就变成ee.x了 } return e; } }; //测试代码开始，使三个div具有drag and drop的能力。 Drag.init('r'); Drag.init('g'); Drag.init('b'); // --></script>
返回
【上篇】
静态链接库和动态链接库
【下篇】
使用JMail组件代替Sql Mail发送Email
作者:
mabel
该日志由 mabel 于11年前发表在综合分类下，最后更新于 2013年06月29日.
转载请注明:
JavaScript 拖拽实现（附注释），最经典简单短小精悍！ | 学步园
+复制链接
抱歉!评论已关闭.
书签
招生
白云飘飘网
青岛房产网
最新文章New
网站优化可以收获更好的收益
robots在网页开发中起到了一定的
SEO引擎优化可以更好的方便搜索
Dreamweaver教程很实用，值得学习
很多的photoshop教程值得学习，你
编程语言很重要，特别是对于计算
数据库非常常见，也非常实用！
H5指的是第5代html，不同于传统企
HTML是什么，该怎么制作？
本站推荐
为什么PHP的吉祥物是一头大象
作业的提交和监控（二）
作业的提交和监控（一）
Boost – Function 分析
奇技淫巧 – C/C++ 宏自身
模板的 SFINAE 原则
Octopress 和 Git 的结合
Electric-fence 介绍