H5拖动实现代码

原理以后有空再说现在嘛先上代码。。。。

 1 *{margin: 0;}
 2     html,body {
 3         width: 100%;
 4         height: 100%;
 5         margin: 0;
 6     }
 7     #dragBoxContainer{
 8         width: 150px;
 9         padding:10px;
10         background:#C1C4E0;
11     }
12     .dragBox{/* 拖动框 */
13         text-align: center;
14         background:#FFFFFF;
15         border: 1px solid #999999;
16         padding: 5px;
17         margin: 10px 0;
18         cursor: move;
19         word-break: break-word;
20         position: relative;
21     }
22     #dragPlaceholder{/* 占位符位 */
23         width: 150px;
24         height: 33px;
25         border:1px dotted red;
26     }
27     .dragHide{
28         /*
29         left: -9999px;
30         */
31         opacity: 0;
32         height: 0;
33         padding: 0;
34         margin: 0;
35     }

 1 <input type="button" value="添加" id="add">
 2 <p id="dragthis">拖动元素是：</p>
 3 <p>
 4     <span id="dragtarget">目标元素是：</span>
 5     <span id="dragtarget_Height">目标中间高度：</span>
 6 </p>
 7 <p id="mouseHeight">鼠标高度是：</p>
 8 <p id="Tips_placeholder">占位符位置在：</p>
 9 
10 <div id="dragBoxContainer"></div>

 1     var drag_this=null;//当前拖动的元素
 2     var drag_target=null;//悬停在那个元素
 3     var DOMnum=0;
 4     $("#add").click(function add(e){
 5         DOMnum++;
 6         $("#dragBoxContainer").append('<div class="dragBox" draggable="true" ondragstart="handleDrag(event)">00'+DOMnum+'</div>');
 7         var cols = document.querySelectorAll('.dragBox');
 8         [].forEach.call(cols, addDnDHandlers);
 9     });
10     function handleDrag(e){
11         e.dataTransfer.setData("Text"," ");//兼容火狐
12     };
13     function handleDragStart(e) {//（该方法只会触发一次）拖拽元素开始被拖拽的时候触发的事件，此事件作用在被拖曳元素上
14         e = e || window.event;
15         var target = e.target || e.srcElement;
16         console.log("拖动元素瞬间触发");
17         drag_this=target
18         console.log(drag_this);
19         $("#dragthis").html("拖动元素是："+target.innerHTML);
20         //$(target).addClass("dragHide");
21     };
22     function handleDragEnter(e) {//当拖曳元素进入目标元素的时候触发的事件，此事件作用在目标元素上
23         e = e || window.event;
24         var target = e.target || e.srcElement;
25         console.log("进入目标元素");
26         drag_target=target;
27         //console.log(target);
28         $("#dragtarget").html("目标元素是："+target.innerHTML)
29         //$(target).addClass("www");
30     };
31     function handleDragOver(e) {//拖拽元素正在目标元素上移动的时候触发的事件，此事件作用在目标元素上
32         console.log("拖拽元素正在目标元素上移动");
33         if (!$(drag_this).hasClass("dragHide")) {
34             $(drag_this).addClass("dragHide");
35         }
36         //console.log({drag_this,drag_target});
37         //var this_top=$(drag_this).offset().top;
38         var target_top=$(drag_target).offset().top;//目标顶部高度
39         var target_height=$(drag_target).height()*.5;//目标高
40         //console.log({this_top,target_top});
41         //console.log(target_top);
42         var mouseHeight=e.pageY;//鼠标Y坐标
43         $("#mouseHeight").html("鼠标高度是："+mouseHeight)
44         var judgeTop=target_top+target_height;//目标中间高度：
45         console.log(target_top,target_height,judgeTop)
46         $("#dragtarget_Height").html("目标中间高度："+judgeTop)
47 
48         if(mouseHeight<=judgeTop){//上
49             var dragPlaceholder=$(drag_target).prev("#dragPlaceholder");   
50             //console.log(dragPlaceholder)
51             if (dragPlaceholder.length==0) {
52                 $("#dragPlaceholder").remove();
53                 $(drag_target).before('<div id="dragPlaceholder">我是占位符位</div>')
54             }
55             $("#Tips_placeholder").html("占位符位置在：上")
56         }else{//下
57             var dragPlaceholder=$(drag_target).next("#dragPlaceholder");   
58             if (dragPlaceholder.length==0) {
59                 $("#dragPlaceholder").remove();
60                 $(drag_target).after('<div id="dragPlaceholder">我是占位符位</div>')
61             }
62             $("#Tips_placeholder").html("占位符位置在：下")
63         }
64     };
65     function handleDragLeave(e) {
66         e = e || window.event;
67         var target = e.target || e.srcElement;
68         console.log("离开目标元素");
69     };
70     function handleDrop(e) {
71         console.log("被拖拽的元素在目标元素上同时鼠标放开触发的事件");
72     };
73     function handleDragEnd(e) {
74         console.log("鼠标释放了");
75         e = e || window.event;
76         var target = e.target || e.srcElement;
77         //console.log(target);
78 
79         $("#dragPlaceholder").before(drag_this).remove();
80         $(drag_this).removeClass("dragHide");
81     };
82     function add(e) {
83         console.log("点击触发");
84     };
85     function addDnDHandlers(elem) {
86         //elem.addEventListener('drag', handleDrag, false);
87         elem.addEventListener('dragstart', handleDragStart, false);
88         elem.addEventListener('dragenter', handleDragEnter, false)
89         elem.addEventListener('dragover', handleDragOver, false);
90         elem.addEventListener('dragleave', handleDragLeave, false);
91         elem.addEventListener('drop', handleDrop, false);
92         elem.addEventListener('dragend', handleDragEnd, false);
93         elem.addEventListener('click', add, false);
94     };