学习drag and drop js实现代码经典之作- Javascript

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 学习drag and drop js实现代码经典之作

Javascript: javascript function、指针及内置对象; Javascript 同时提交多个Web表单的方法; 用jQuery简化JavaScript开发分析; Javascript静态分页(多个资料，静态自动分页); JavaScript 调试器简介; JavaScript 判断浏览器类型及版本; javascript eval函数深入认识; 一个写得较好的JavaScript日期挑选控件; JavaScript基本概念初级讲解论坛贴的学习记录; javascript web对话框与弹出窗口; input、button的不同type值在ajax提交表单时导致的陷阱; javascript 密码强弱度检测万能插件; javascript 特殊字符串; Javascript动态伸缩+淡出淡入; javascript URL锚点取值方法; jQuery Div中加载其他页面的实现代码; javascript 文档的编码问题解决; escape、encodeURI 和 encodeURIComponent 的区别; [推荐]javascript 面向对象技术基础教程; js 页面执行时间计算代码

No. « ‹ 127 128 129 130 › »

技术文章搜索

关键字

Javascript 中的学习drag and drop js实现代码经典之作

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

收藏到网摘: n/a

JavaScript 拖拽实现（附注释），最经典简单短小精悍！ jquery创建div 实现代码

今天读John Resig的Pro Javascript Techniques时候看到他书上给的一个关于drag and drop的例子, 合上书本自己写一个简化版本的。大约20分钟完成，没有考虑兼容firefox。整个代码封装成一个对象也是借鉴书中的风格。我觉得很好。 Pro Javascript Techniques书中推荐的drag and drop 例子：http://boring.youngpup.net/2001/domdrag

点击运行可以看到效果:

<html>
<head>
<title>Drag</title>
<style type="text/css">
</style>
<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'){ e.x = e.layerX;//复制了n遍，到了csdn就变成ee.x了 } if(typeof e.y == 'undefined'){ e.y = e.layerY;//复制了n遍，到了csdn就变成ee.x了 } return e; }
}; </script>
</head>
<body>
<div id="r" style="position:absolute; left:100px; top:100px; background-color:red; height:80px; width:80px;"></div>
<div id="g" style="position:absolute; left:250px; top:100px; background-color:green; height:80px; width:80px;"></div>
<div id="b" style="position:absolute; left:400px; top:100px; background-color:blue; height:80px; width:80px;"></div>
</body>
<script type="text/javascript"> //测试代码开始，使三个div具有drag and drop的能力。
Drag.init('r');
Drag.init('g');
Drag.init('b'); </script>
</html>

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

打包下载地址

JavaScript 拖拽实现（附注释），最经典简单短小精悍！ jquery创建div 实现代码

Javascript 中的 学习drag and drop js实现代码经典之作

评论 (0) All

Javascript 中的学习drag and drop js实现代码经典之作