iview Modal Draggable 實現模態窗移動端拖拽（不影響Modal點選事件）
阿新 • • 發佈：2020-11-14
<!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>