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

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

Javascript: js中几种去掉字串左右空格的方法; 判断两种颜色值是否为相似颜色; 关于键盘事件中keyCode、which和charCode 的兼容性测试; 提高 DHTML 页面性能; 漂亮的Slider效果类终于封装成功; 注释的艺术——JS里直接写HTML，无需转义; 用javascript实现无刷新更新数据的详细步骤 asp; Windows Live的@live.com域名注册漏洞利用代码; 只能输入小于最大数且是正整数的脚本; 破除网页鼠标右键被禁用的绝招大全; escape、encodeURI、encodeURIComponent等方法的区别比较; URL编码转换,escape() encodeURI() encodeURIComponent(); 使用javascript访问XML数据的实例; ie和firefox中img对象区别的困惑; utf8的编码算法转载; Javascript六种风格的时间显示方式; JavaScript实现禁止后退的方法; 从javascript语言本身谈项目实战; 通用于ie和firefox的函数 GetCurrentStyle (obj, prop); javascript实现划词标记划词搜索功能修正版

No. « ‹ 38 39 40 41 › »

技术文章搜索

关键字

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

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

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