zoukankan html css js c++ java

比较有意思的原生态js拖拽写法----摘自javascript高级程序设计3

 1  var DragDrop = function () {               
 2                 var dragging = null;
 3                 var diffX = 0;
 4                 var diffY = 0;
 5                 function handleEvent(event) {
 6                     event = EventUtil.getEvent(event);
 7                     var target = EventUtil.getTarget(event);
 8                     switch (event.type) {
 9                         case "mousedown":
10                             if (target.className.indexOf("draggable") > -1) {
11                                 dragging = target;
12                                 diffX = event.clientX - target.offsetLeft;
13                                 diffY = event.clientY - target.offsetTop;                                
14                             }
15                             break;
16                         case "mousemove":
17                             if (dragging !== null) {
18                                 dragging.style.left = (event.clientX - diffX) + "px";
19                                 dragging.style.top = (event.clientY - diffY) + "px";                                
20                             }
21                             break;
22                         case "mouseup":                            
23                             dragging = null;
24                             break;
25                     }
26                 }
27                 return {
28                 enable : function () {
29                     EventUtil.addHandler(document, "mousedown", handleEvent);
30                     EventUtil.addHandler(document, "mousemove", handleEvent);
31                     EventUtil.addHandler(document, "mouseup", handleEvent);
32                 },
33                 disable : function () {
34                     EventUtil.addHandler(document, "mousedown", handleEvent);
35                     EventUtil.addHandler(document, "mousemove", handleEvent);
36                     EventUtil.addHandler(document, "mouseup", handleEvent);
37                 }
38                 }
39             } ();
40           window.onload = function () {
41                 DragDrop.enable(); DragDrop.disable();
42             }

1 <body>
2 <div class="draggable" style="position:absolute; background-color:Red; 100px; height:100px;left:0px"></div>
3 <div class="draggable" style="position:absolute; background-color:Red; 100px; height:100px;left:200px"></div>
4 <div class="draggable" style="position:absolute; background-color:Red; 100px; height:100px;left:500px"></div>
5 <div class="draggable" style="position:absolute; background-color:Red; 100px; height:100px;left:800px"></div>
6 </body>

查看全文

相关阅读:
php把数组保存入php文件中
 js判断js文件有没有引入，一般引入的js文件里面都会有函数和对象是否存在
 js 控制按钮点击后不可用
 关于jquery.fn
js判断回车，区分IE，火狐，谷歌
 复选框全选全不选反选
 50个必备的实用jQuery代码段
 jQuery.extend 函数详解
 VIM查找替换归纳总结
 mysql优化之query_cache_limit

原文地址：https://www.cnblogs.com/guoyansi19900907/p/3582013.html