前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >拖放实现--兼容手机与pc端 原

拖放实现--兼容手机与pc端 原

作者头像
tianyawhl
发布2019-04-04 16:57:56
1.2K0
发布2019-04-04 16:57:56
举报
文章被收录于专栏:前端之攻略

拖放是一种非常流行的用户界面模式。它的概念很简单:点击某个对象,并按住鼠标按钮不放,将鼠标移到到另一个区域,然后释放按钮将对象放到这里。 拖放的基本概念很简单:创建一个绝对定位的元素,使其可以用鼠标移到。

代码语言:javascript
复制
<body>
    <div style="">
        <div class="draggable" style="width:100px;height:100px;position:absolute;background:red">移动的div</div>
        <div class="draggable" style="width:100px;height:100px;position:absolute;background:green;left:120px;">移动的div</div>
    </div>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
    <script type="text/javascript">
    var DragDrop = function() {
        var dragging = null;
        var diffX = 0;
        var diffY = 0;

        function handleEvent(event) {
            event = event || window.event;
            var target = event.target;
            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() {
                document.addEventListener("mousedown", handleEvent, false);
                document.addEventListener("mousemove", handleEvent, false);
                document.addEventListener("mouseup", handleEvent, false);
            },
            disable: function() {
                document.removeEventListener("mousedown", handleEvent, false);
                document.removeEventListener("mousemove", handleEvent, false);
                document.removeEventListener("mouseup", handleEvent, false)
            }
        }
    }
    DragDrop().enable();
    </script>
</body>

拖放功能还不能真正应用起来,除非能知道什么时候拖动开始了。从这点上看,前面的代码没有提供任何方法表示拖动开始、正在拖动或者已经结束。这时,可以使用自定义事件来指示这几个事件的发生,让应用的其他部分与拖动功能进行交互。

代码语言:javascript
复制
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>拖放</title>
    <style type="text/css">
    .drap-container {
        padding-top: 15px;
    }

    #dragWrap {
        height: 100px;
        background: #f2f2f2;
        width: 300px;
        height: 300px;
        border: 1px solid #ccc;
        position: relative;
        float: left;
        margin-right: 20px;
        padding: 10px;
    }

    .draggable {
        width: 100px;
        height: 100px;
        position: absolute;
        color: #fff;
        text-align: center;
        padding: 10px;
        cursor: pointer;
    }

    .box1 {
        background: #5972f1;
    }

    .box2 {
        left: 120px;
        background: #47bf6c;
    }

    #status {
        height: 35px;
        line-height: 35px;
        background: #fdf5f0;
        padding: 0 15px;
        border: 1px solid #fde4d4;
        margin-bottom: 10px;
    }

    @media(max-width:500px) {
        #dragWrap {
            width: 100%;
            float: none;
        }
    }
    </style>
</head>

<body class="">
    <div class="container drap-container">
        <div id="dragWrap">
            <div class="draggable box1" id="box1">移动的div</div>
            <div class="draggable box2" id="box2">移动的div</div>
        </div>
        <div id="status">status</div>
    </div>
    <script type="text/javascript">
    function EventTarget() {
        this.handlers = {}
    }
    EventTarget.prototype = {
        constructor: EventTarget,
        addHandler: function(type, handler) {
            console.log(type);
            //刚开始只有type并没有为this.handlers[type]赋值
            if (typeof this.handlers[type] == "undefined") {
                this.handlers[type] = [];
                //console.log("hi")
            }
            //接着执行push
            this.handlers[type].push(handler);
            console.log(this.handlers[type]);

        },
        fire: function(event) {
            if (!event.target) {
                event.target = this;
                //console.log("not have eventTarget")
            }
            if (this.handlers[event.type] instanceof Array) {
                //console.log("isArray")
                var handlers = this.handlers[event.type];
                //循环执行多个事件
                for (var i = 0, len = handlers.length; i < len; i++) {
                    handlers[i](event);
                }

            }
        }
    }
    var DragDrop = function() {

        var wrap = document.getElementById("dragWrap");
        var dragdrop = new EventTarget();
        var dragging = null;
        var diffX = 0;
        var diffY = 0;
        var startEvt, moveEvt, endEvt;
        if ("ontouchstart" in window) {
            startEvt = "touchstart";
            moveEvt = "touchmove";
            endEvt = "touchend"
        } else {
            startEvt = "mousedown";
            moveEvt = "mousemove";
            endEvt = "mouseup";
        }

        function handleEvent(event) {
            //获取事件和对象
            event = event || window.event;

            var target = event.target;
            //确定事件类型
            switch (event.type) {
                case startEvt:
                    if (target.className.indexOf("draggable") > -1) {
                        dragging = target;
                        console.log(event.clientX)
                        if (startEvt == "touchstart") {
                            console.log(event)
                            diffX = event.touches[0].clientX - target.offsetLeft;
                            diffY = event.touches[0].clientY - target.offsetTop;

                            dragdrop.fire({ type: "dragstart", target: dragging, x: event.touches[0].clientX, y: event.touches[0].clientY });
                            console.log(event.touches[0].clientX, event.touches[0].clientY)
                        } else {
                            diffX = event.clientX - target.offsetLeft;
                            diffY = event.clientY - target.offsetTop;
                            dragdrop.fire({ type: "dragstart", target: dragging, x: event.clientX, y: event.clientY });
                        }
                    }



                    break;

                case moveEvt:
                    if (dragging !== null) {
                        if (moveEvt == "touchmove") {

                            event.preventDefault();
                            console.log(event)
                            dragging.style.left = event.touches[0].clientX - diffX + "px";
                            dragging.style.top = event.touches[0].clientY - diffY + "px";
                            console.log(event.touches[0].clientX, event.touches[0].clientY)
                            dragdrop.fire({ type: "drag", target: dragging, x: event.touches[0].clientX, y: event.touches[0].clientY })
                        } else {
                            dragging.style.left = event.clientX - diffX + "px";
                            dragging.style.top = event.clientY - diffY + "px";
                            dragdrop.fire({ type: "drag", target: dragging, x: event.clientX, y: event.clientY })
                        }

                    }
                    break;

                case endEvt:
                    if (endEvt == "touchend") {
                        console.log(endEvt)
                        console.log(event)
                        dragdrop.fire({ type: "dragend", target: dragging, x: event.changedTouches[0].clientX, y: event.changedTouches[0].clientY })
                    } else {
                        dragdrop.fire({ type: "dragend", target: dragging, x: event.clientX, y: event.clientY })
                    }
                    dragging = null;
                    break;
            }
        }

        //公共接口
        dragdrop.enable = function() {
                wrap.addEventListener(startEvt, handleEvent, false);
                wrap.addEventListener(moveEvt, handleEvent, false);
                wrap.addEventListener(endEvt, handleEvent, false);
            },
            dragdrop.disable = function() {
                wrap.removeEventListener(startEvt, handleEvent, false);
                wrap.removeEventListener(moveEvt, handleEvent, false);
                wrap.removeEventListener(endEvt, handleEvent, false)
            }
        return dragdrop
    }();
    //可以写成
    //DragDrop=DragDrop() 
    //返回EventTarget{disable:ƒ (),enable:ƒ (),handlers:{drag:[f],dragend:[f],dragstart:[f]}}
    //console.log(DragDrop)
    DragDrop.enable();
    DragDrop.addHandler("dragstart", function(event) {
        var status = document.getElementById("status");
        status.innerHTML = "Started dragging " + event.target.id
    });
    DragDrop.addHandler("drag", function(event) {
        var status = document.getElementById("status");
        status.innerHTML = "Dragged " + event.target.id + " to(" + event.x + "," + event.y + ")";
    });
    DragDrop.addHandler("dragend", function(event) {
        var status = document.getElementById("status");
        status.innerHTML = "Dragged " + event.target.id + " at(" + event.x + "," + event.y + ")";
    });
    </script>
</body>

</html>

由于DragDrop对象是一个使用了模块模式的单例,所以需要进行一些更改来使用EventTarget类型。首先,创建一个新的EventTarget 对象,然后添加enable()和disable()方法,最后返回这个对象。

查看拖放效果

(adsbygoogle = window.adsbygoogle || []).push({});

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档