2020-9-17日：高级技巧：拖放；[ 鼠标拖尾 ]

一、简单的拖放界面 :

DragDrop 对象封装了拖放的所有基本功能;
DragDrop 还有两个公共方法：enable()和 disable() : 相应添加和删除所有的事件处理程序 ; 提供了额外的对拖放功能的控制手段 ;
使用 DragDrop 对象：

页面上包含这些代码；
并调用 enable()；
拖放会自动针对所有包含 "draggable"类的元素启用；

元素能被拖放，它必须是绝对定位的；

<div class="draggable" style="position:absolute; background:red"> </div>

var DragDrop = function () {

        var dragging = null;

        function handleEvent(event) {

            //获取事件和目标         
            event = EventUtil.getEvent(event);
            var target = EventUtil.getTarget(event);

            //确定事件类型         
            switch (event.type) {
                case "mousedown":
                    if (target.className.indexOf("draggable") > -1) {
                        dragging = target;
                    }
                    break;

                case "mousemove":
                    if (dragging !== null) {

                        //指定位置                     
                        dragging.style.left = event.clientX + "px";
                        dragging.style.top = event.clientY + "px";
                    }
                    break;

                case "mouseup": dragging = null;
                    break;
            }
        };
//公共接口     
    return {
        enable: function () {
            EventUtil.addHandler(document, "mousedown", handleEvent);
            EventUtil.addHandler(document, "mousemove", handleEvent);
            EventUtil.addHandler(document, "mouseup", handleEvent);
        },
        disable: function () {
            EventUtil.removeHandler(document, "mousedown", handleEvent);
            EventUtil.removeHandler(document, "mousemove", handleEvent);
            EventUtil.removeHandler(document, "mouseup", handleEvent);
        }
    } 
}(); // 自执行

二、修缮拖动功能；

计算元素左上角和指针位置之间的差值；

提高拖拽视觉体验；

diffX 和 diffY 变量是私有的，只有 handleEvent()函数需要；
mousedown 事件发生时，通过 clientX 减去目标的 offsetLeft，clientY 减去目标的 offsetTop，可以计算到这两个变量的值；
触发了 mousemove 事件后，就可以使用这些变量从指针坐标中减去，得到终的坐标

var DragDrop = function () {

        var dragging = null;
            diffX = 0;
         diffY = 0;

        function handleEvent(event) {

            //获取事件和目标         
            event = EventUtil.getEvent(event);
            var target = EventUtil.getTarget(event);

            //确定事件类型         
            switch (event.type) {
                case "mousedown":
                    if (target.className.indexOf("draggable") > -1) {
                        dragging = target;
                        diffX = event.clientX - target.offsetLeft;
                  diffY = event.clientY - target.offsetTop;
                    }
                    break;

                case "mousemove":
                    if (dragging !== null) {

                        //指定位置                    
                        dragging.style.left = (event.clientX - diffX) + "px";
                  dragging.style.top = (event.clientY - diffY) + "px";
                    }
                    break;

                case "mouseup":
                    dragging = null;
                    break;
            }
        };

        //公共接口     
        return {
            enable: function () {
                EventUtil.addHandler(document, "mousedown", handleEvent);
                EventUtil.addHandler(document, "mousemove", handleEvent);
                EventUtil.addHandler(document, "mouseup", handleEvent);
            },

            disable: function () {
                EventUtil.removeHandler(document, "mousedown", handleEvent);
                EventUtil.removeHandler(document, "mousemove", handleEvent);
                EventUtil.removeHandler(document, "mouseup", handleEvent);
            }
        }
    }();

添加自定义事件

进行一些更改来使用 EventTarget 类型；
创建一个新的 EventTarget 对象；
添加 enable()和 disable()方法；

最后返回这个对象；

 1 var DragDrop = function () {
 2 
 3         var dragdrop = new EventTarget(),
 4             dragging = null,
 5             diffX = 0,
 6             diffY = 0;
 7 
 8         function handleEvent(event) {
 9 
10             //获取事件和对象         
11             event = EventUtil.getEvent(event);
12             var target = EventUtil.getTarget(event);
13 
14             //确定事件类型 
15             switch (event.type) {
16                 case "mousedown":
17                     if (target.className.indexOf("draggable") > -1) {
18                         dragging = target;
19                         diffX = event.clientX - target.offsetLeft;
20                         diffY = event.clientY - target.offsetTop;
21                         dragdrop.fire({
22                             type: "dragstart",     // 定义dragstart事件处理程序 ；
23                             target: dragging,     // 被拖动的元素设置为了 target
24                             x: event.clientX,
25                             y: event.clientY
26                         });
27                     }
28                     break;
29 
30                 case "mousemove":
31                     if (dragging !== null) {
32 
33                         //指定位置                     
34                         dragging.style.left = (event.clientX - diffX) + "px";
35                         dragging.style.top = (event.clientY - diffY) + "px";
36 
37                         //触发自定义事件                       
38                         dragdrop.fire({
39                             type: "drag",        // 定义drag事件处理程序
40                             target: dragging,   // 被拖动的元素设置为了 target
41                             x: event.clientX,
42                             y: event.clientY
43                         });
44                     }
45                     break;
46 
47                 case "mouseup":
48                     dragdrop.fire({
49                         type: "dragend",      // 定义dragend事件处理程序
50                         target: dragging,   // 被拖动的元素设置为了 target
51                         x: event.clientX,
52                         y: event.clientY
53                     });
54                     dragging = null;
55                     break;
56             }
57         };
58 
59         //公共接口     
60         dragdrop.enable = function () {
61             EventUtil.addHandler(document, "mousedown", handleEvent);
62             EventUtil.addHandler(document, "mousemove", handleEvent);
63             EventUtil.addHandler(document, "mouseup", handleEvent);
64         };
65 
66         dragdrop.disable = function () {
67             EventUtil.removeHandler(document, "mousedown", handleEvent);
68             EventUtil.removeHandler(document, "mousemove", handleEvent);
69             EventUtil.removeHandler(document, "mouseup", handleEvent);
70         };
71 
72         return dragdrop;
73     }();

定义了三个事件：dragstart、drag 和 dragend ；【22，39，49行代码】；
将被拖动的元素设置为了 target ；【23，40，50行代码】；
给出了 x 和 y 属性来表示当前的位置 ; 【24，41，51行代码】；
触发于 dragdrop 对象； dragdrop.fire（{ }）；
在返回对象前给对象增加 enable()和 disable()方法 ;

上述处理后，支持了事件 : 使用；
给为 DragDrop 对象的每个事件添加了事件处理程序：

 1 DragDrop.addHandler("dragstart", function (event) {
 2         var status = document.getElementById("status");
 3         status.innerHTML = "Started dragging " + event.target.id;
 4     });
 5 
 6     DragDrop.addHandler("drag", function (event) {
 7         var status = document.getElementById("status");
 8         status.innerHTML += "<br/> Dragged " + event.target.id + " to (" + event.x + "," + event.y + ")";
 9     });
10 
11     DragDrop.addHandler("dragend", function (event) {
12         var status = document.getElementById("status");
13         status.innerHTML += "<br/> Dropped " + event.target.id + " at (" + event.x + "," + event.y + ")";
14     });

一旦元素被放下了，就可以看到从它一开始被拖动之后经过的所有的中间步骤；

posted @ 2020-09-16 17:31 Amber丶Li 阅读(190) 评论(0) 收藏举报

刷新页面返回顶部

登峰造极境；

My effort is because of you, but not for you ;

2020-9-17日：高级技巧：拖放；[ 鼠标拖尾 ]

公告

登峰造极境；

My effort is because of you, but not for you ;

2020-9-17日：高级技巧： 拖放 ；[ 鼠标拖尾 ]

公告

2020-9-17日：高级技巧：拖放；[ 鼠标拖尾 ]