h5拖拽

h5拖拽

 1         要想拖拽首先要设置 draggable="true"**
 2            let n = 0;
 3            // 拖拽元素的事件
 4            // 当拖拽开始的时候触发
 5            right.ondragstart = function () {
 6                this.style.background = "red";
 7            }
 8            // 连续拖拽  持续触发
 9            right.ondrag = function () {
10                this.innerHTML = n++;
11            }
12            right.ondragend = function () {
13                this.innerHTML = "拖拽结束";
14                document.body.removeChild(this);
15            }
16            // 目标元素的事件
17            // 当拖拽元素进入目标元素的时候触发
18            left.ondragenter = function () {
19                this.innerHTML = "拖拽元素已进入";
20            }
21            left.ondragover = function (e) {
22                e = e || window.event;
23                e.cancelBubble;
24                e.stopPropagation();
25                this.innerHTML = n++;
26            }
27            // 当拖拽元素离开目标元素时候触发
28            left.ondragleave = function () {
29                this.innerHTML = "我走了";
30            }
31            // 当拖拽元素在目标元素上释放鼠标触发
32            left.ondrop = function (e) {
33                e = e || window.event;
34                e.cancelBubble;
35                e.stopPropagation();
36            }