iview Modal Draggable 实现模态窗移动端拖拽（不影响Modal点击事件） 

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>iview Modal模态窗 移动端拖拽（不影响Modal点击事件）</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="http://unpkg.com/view-design/dist/styles/iview.css">
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
    <script type="text/javascript" src="http://unpkg.com/view-design/dist/iview.min.js"></script>
</head>

<body>
    <div id="app">
        <Modal v-model="visible1" title="测试窗口1" draggable>测试窗口1</Modal>
        <Modal v-model="visible2" title="测试窗口2" draggable>测试窗口2</Modal>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                visible1: true,
                visible2: true
            },
            mounted() {
                let _this = this;
                // 使用$nextTick保证捕获到dom元素（指".ivu-modal-content"）
                this.$nextTick(() => {
                    let modalContentList = document.querySelectorAll('.ivu-modal-content');
                    for (let i = 0; i < modalContentList.length; i++) {
                        _this.addDraggable(modalContentList[i]);
                    }
                })
            },
            methods: {
                // 接收Dom元素并为此元素添加移动端touch触摸事件，以此实现拖拽功能
                addDraggable(divEl) {
                    let currL, currT;
                    divEl.addEventListener('touchstart', function (e) {
                        let ev = e || window.event;
                        let touch = ev.targetTouches[0];
                        currL = touch.clientX - divEl.offsetLeft;
                        currT = touch.clientY - divEl.offsetTop;
                        document.addEventListener("touchmove", defaultEvent, false);
                    })
                    divEl.addEventListener('touchmove', function (e) {
                        let ev = e || window.event;
                        let touch = ev.targetTouches[0];
                        divEl.style.left = `${touch.clientX - currL}px`;
                        divEl.style.top = `${touch.clientY - currT}px`;
                    })
                    divEl.addEventListener('touchend', function () {
                        document.removeEventListener("touchmove", defaultEvent);
                    })
                    function defaultEvent(e) {
                        // e.preventDefault();
                    }
                }
            }
        })
    </script>
</body>

</html>

 

最终效果：

 

posted @ 2020-11-14 15:13  最好的年纪  阅读(1433)  评论(0)  编辑  收藏  举报