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

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

Javascript: 一个js写的日历（代码部分网摘）; IE,firefox(火狐)浏览器无提示关闭窗口js实现代码小结; jquery 子窗口操作父窗口的代码; 用JavaScript隐藏控件的方法; js 冒泡事件与事件监听使用分析; ie与ff下的event事件; 比较全面的event对像在IE与FF中的区别推荐; js 获取中文拼音,Select自动匹配字母获取值的代码; JavaScript 变量命名规则; 没有form表单情况下敲回车键提交表单的js代码; jQuery 使用手册(四); jQuery 使用手册(六); jQuery 使用手册(七); Javascript 数组添加一个 indexOf 方法的实现代码; Javascript 数组添加 shuffle 方法的实现代码; Javascript 两个窗体之间传值实现代码; Javascript showModalDialog两个窗体之间传值; js 覆盖和重载函数; JavaScript中Object和Function的关系小结; javascript parseInt 大改造

No. « ‹ 186 187 188 189 › »

技术文章搜索

关键字

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

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

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