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

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

Javascript: JavaScript入门教程 Cookies; IE8 浏览器Cookie的处理; JS 强制设为首页的代码; JS之日历实践附实现代码; javascript onkeydown,onkeyup,onkeypress,onclick,ondblclick; JAVASCRIPT keycode总结; javascript 学习之旅（1）; javascript 学习之旅（2）; javascript 学习之旅（3）; [Web]防止用户复制页面内容和另存页面的方法; 让网页根据不同IE版本显示不同的内容; 让input不可点击的另一种方法; fckeditor 获取文本框值的实现代码; jquery插件jbox使用iframe关闭问题; js获取提交的字符串的字节数; JS IE和FF兼容性问题汇总; js函数使用技巧之 setTimeout(function(){},0); javascript 模拟select下拉列表特效; js 静态HTML表格排序功能实现; JavaScript 克隆数组最简单的方法

No. « ‹ 125 126 127 128 › »

技术文章搜索

关键字

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

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

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