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

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

Javascript: Javascript 学习笔记错误处理; Javascript 类的继承实现代码; JavaScript 创建对象和构造类实现代码; JavaScript 学习小结(适合新手参考); extjs 列表框(multiselect)的动态添加列表项的方法; javascript getElementsByName()的用法说明; Document 对象的常用方法; JS 事件冒泡示例代码; JS 面向对象的5钟写法; JS 输入字数判断实现代码; Javascript 汉字字节判断; JavaScript 关键字屏蔽实现函数; 一句话JavaScript表单验证代码; 利用javascript实现一些常用软件的下载导航; jQuery 相关控件的事件操作分解; JavaScript 异步调用框架 (Part 1 - 问题 & 场景); JavaScript 异步调用框架 (Part 2 - 用例设计); JavaScript 异步调用框架 (Part 3 - 代码实现); JavaScript 异步调用框架 (Part 4 - 链式调用); JavaScript 异步调用框架 (Part 5 - 链式实现)

No. « ‹ 150 151 152 153 › »

技术文章搜索

关键字

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

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

收藏到网摘: 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实现代码经典之作