Vue 项目中使用拖拽弹框 dragdialog, 弹框拖拽缩放，拖拽排序等

客官°小女子只卖身不卖艺 2022-12-08 05:07 348阅读 0赞

20200918000407873.gif

在开发的时候有个需求是 对弹框进行拖拽移动，拖拽方法，对弹框内的模块进行拖拽排序移动位置

本drag-dialog是在element框架项目内进行的

  • 技术框架：vue.js + element-ui
  • 拖拽组件： vue-slicksort
  • 自定义指令

drag自定义指令

1、在项目中src中新建 directive —> drag-dialog.js

  1. import Vue from 'vue'
  2. // v-dialogDrag: 弹窗拖拽属性
  3. Vue.directive('dialogDrag', {
  4.     bind(el, binding, vnode, oldVnode) {
  5.         // 自定义属性，判断是否可拖拽　
  6.         if (!binding.value) return
  7.         const dialogHeaderEl = el.querySelector('.el-dialog__header') //.drag-dialog-box
  8.         const dragDom = el.querySelector('.el-dialog')
  9.         dialogHeaderEl.style.cssText += ';cursor:move;'
  10.         dragDom.style.cssText += ';top:150px;'
  12.         // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
  13.         const sty = (function () {
  14.             if (document.body.currentStyle) {
  15.                 // 在ie下兼容写法
  16.                 return (dom, attr) => dom.currentStyle[attr]
  17.             } else {
  18.                 return (dom, attr) => getComputedStyle(dom, false)[attr]
  19.             }
  20.         })()
  22.         dialogHeaderEl.onmousedown = (e) => {
  23.             // 鼠标按下，计算当前元素距离可视区的距离
  24.             const disX = e.clientX - dialogHeaderEl.offsetLeft
  25.             const disY = e.clientY - dialogHeaderEl.offsetTop
  27.             const screenWidth = document.body.clientWidth // body当前宽度
  28.             const screenHeight = document.documentElement.clientHeight // 可见区域高度(应为body高度，可某些环境下无法获取)
  30.             const dragDomWidth = dragDom.offsetWidth // 对话框宽度
  31.             const dragDomheight = dragDom.offsetHeight // 对话框高度
  33.             const minDragDomLeft = dragDom.offsetLeft
  34.             const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth
  36.             const minDragDomTop = dragDom.offsetTop
  37.             const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomheight
  39.             // 获取到的值带px 正则匹配替换
  40.             let styL = sty(dragDom, 'left')
  41.             // 为兼容ie　
  42.             if (styL === 'auto') styL = '0px'
  43.             let styT = sty(dragDom, 'top')
  45.             // console.log(styL)
  46.             // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
  47.             if (styL.includes('%')) {
  48.                 styL = +document.body.clientWidth * (+styL.replace(/%/g, '') / 100)
  49.                 styT = +document.body.clientHeight * (+styT.replace(/%/g, '') / 100)
  50.             } else {
  51.                 styL = +styL.replace(/px/g, '')
  52.                 styT = +styT.replace(/px/g, '')
  53.             };
  55.             document.onmousemove = function (e) {
  56.                 // 通过事件委托，计算移动的距离
  57.                 let left = e.clientX - disX
  58.                 let top = e.clientY - disY
  59.                 // 边界处理
  60.                 if (-(left) > minDragDomLeft) {
  61.                     left = -(minDragDomLeft)
  62.                 } else if (left > maxDragDomLeft) {
  63.                     left = maxDragDomLeft
  64.                 }
  66.                 if (-(top) > minDragDomTop) {
  67.                     top = -(minDragDomTop)
  68.                 } else if (top > maxDragDomTop) {
  69.                     top = maxDragDomTop
  70.                 }
  72.                 // 移动当前元素
  73.                 dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`
  75.                 // emit onDrag event
  76.                 vnode.child.$emit('dragDialog')
  77.             }
  79.             document.onmouseup = function (e) {
  80.                 document.onmousemove = null
  81.                 document.onmouseup = null
  82.             }
  83.             return false
  84.         }
  85.     }
  86. })
  90. /* binding 
  91. value:{
  92.     value:boolean是否可拉伸 （必传）
  93.     minw:Number最小宽 （必传）
  94.     maxw:Number最大宽 （必传）
  95.     minh:Number最小高 （必传）
  96.     maxh:Number 最大高 （必传）
  97.     ratio:Number宽高比 （非必传）
  98.     ratio?
  99.     minw:Number最小宽 （必传）
  100.     maxw:Number最大宽 （必传）
  101.     minh:Number最小高 （非必传）
  102.     maxh:Number 最大高 （非必传）
  103.  } */
  104. Vue.directive('dialogChange', {
  105.     bind(el, binding, vnode, oldVnode) {
  106.         // 自定义属性，判断是否可拉伸
  107.         const bindVal = binding.value
  108.         console.log(bindVal, "binding")
  110.         if (!bindVal.value) return
  111.         const dragDom = el.querySelector('.el-dialog')
  112.         // console.log(dragDom,"拖拽属性")
  113.         let dragMouse
  114.         // 在弹出框的右下角添加可拉伸标志 class='mouse'
  115.         for (let i = 0; i < dragDom.childNodes[2].childNodes.length; i++) {
  116.             if (dragDom.childNodes[2].childNodes[i].className === 'mouse') {
  117.                 dragMouse = dragDom.childNodes[2].childNodes[i]
  118.             }
  119.         }
  121.         // 鼠标拖拽
  122.         dragMouse.onmousedown = (e) => {
  123.             // content区域
  124.             const content = dragDom.parentNode.parentNode.parentNode.parentNode.parentNode
  125.             console.log(content, "llllllllllllllllllllllllllllllll")
  126.             const disX = e.clientX - dragDom.offsetWidth
  127.             const disY = e.clientY - dragDom.offsetHeight
  128.             console.log(e, disX, disY, "0000")
  131.             document.onmousemove = function (e) {
  132.                 e.preventDefault() // 移动时禁用默认事件
  133.                 // 通过事件委托，计算移动的距离
  135.                 let width = e.clientX - disX
  136.                 let height = e.clientY - disY
  137.                 console.log(e.clientX, e.clientY, content.offsetWidth, content.offsetHeight, width, height, "sssss")
  139.                 // 距离底部20px停止拖动
  140.                 if (e.clientY > content.offsetHeight - 20) {
  141.                     console.log("不能再拖了")
  142.                     return
  143.                 } else {
  144.                     if (!!bindVal.ratio) {
  145.                         // 设置比例 宽高等比缩放
  147.                         if (width < content.offsetWidth && height < content.offsetHeight) {
  148.                             if (!!bindVal.minw && bindVal.minw < width && !!bindVal.maxw && width < bindVal.maxw) {
  149.                                 dragDom.style.width = `${width}px`
  150.                                 dragDom.style.height = `${width * bindVal.ratio}px`
  151.                                 vnode.child.$emit('dragDialogHeight',width * bindVal.ratio)
  152.                             }
  153.                             // dragDom.style.height = `${width*0.6}px`
  154.                             // dragDom.style.height = `${height}px`
  155.                         }
  156.                     } else {
  157.                         // 不设置比例 宽高随意拖动
  158.                         if (width > content.offsetWidth && height < content.offsetHeight) {
  159.                             if (!!bindVal.minh && bindVal.minh < height && !!bindVal.maxh && height < bindVal.maxh) {
  160.                                 dragDom.style.height = `${height}px`
  161.                             }
  162.                         } else if (width < content.offsetWidth && height > content.offsetHeight) {
  163.                             if (!!bindVal.minw && bindVal.minw < width && !!bindVal.maxw && width < bindVal.maxw) {
  164.                                 dragDom.style.width = `${width}px`
  165.                             }
  166.                         } else if (width < content.offsetWidth && height < content.offsetHeight) {
  167.                             if (!!bindVal.minh && bindVal.minh < height && !!bindVal.maxh && height < bindVal.maxh) {
  168.                                 dragDom.style.height = `${height}px`
  169.                             }
  170.                             if (!!bindVal.minw && bindVal.minw < width && !!bindVal.maxw && width < bindVal.maxw) {
  171.                                 dragDom.style.width = `${width}px`
  172.                             }
  173.                             // dragDom.style.height = `${width*0.6}px`
  174.                             // dragDom.style.height = `${height}px`
  175.                         }
  176.                     }
  177.                 }
  182.             }
  183.             document.onmouseup = function (e) {
  184.                 document.onmousemove = null
  185.                 document.onmouseup = null
  186.             }
  187.             return false
  188.         }
  191.     }
  192. })

2、在main.js中引用

  1. import './components/dialog'

3、在dialog中使用 dialog组件 代码中添加v-if为了让每次弹出框都不继承上一次的改变

  1. <template>
  2.   <div class="home">
  4.     <el-dialog v-if="dialog.dialogVisible" v-dialogDrag:{dialogDrag}="dialog.dialogDrag" v-dialogChange:{dialogChange}="{value:dialog.dialogChange,maxw:1000,minw:600,ratio:0.6}" ref="dialogWrapper"
  5.       :close-on-click-modal="false" :title=dialog.title :visible.sync="dialog.dialogVisible">
  6.       <div class="dialog-body">
  7.         <SlickList :lockToContainerEdges="false" :useWindowAsScrollContainer="false" :pressDelay="50" v-model="commonsApplication" helperClass="helperClass" class="ul" axis="xy">
  8.           <SlickItem v-for="(item,index) in commonsApplication" :index="index" :key="index+'key'" class="li">
  9.             <div class="app-border">
  10.               <img :src="item.Icon" class="app-icon">
  11.               <p>{
  12.    {item.name}}</p>
  13.             </div>
  14.           </SlickItem>
  15.         </SlickList>
  16.       </div>
  18.       <slot slot="footer" class="dialog-footer">
  20.         <div class='mouse'>
  21.              <!-- 通过此模块拖拽缩放 -->
  23.         </div>
  24.       </slot>
  25.     </el-dialog>
  27.   </div>
  28. </template>
  30. <script>
  31. // @ is an alias to /src
  32. // import VueDragResize from "vue-drag-resize";
  33. // import elDragDialog from "@/directive/el-drag-dialog"; // base on element-ui
  34. import { SlickList, SlickItem } from "vue-slicksort";
  35. export default {
  36.   name: "Home",
  37.   // directives: { elDragDialog },
  38.   components: {
  39.     SlickList,
  40.     SlickItem,
  41.   },
  42.   data() {
  43.     return {
  44.       dialog: {
  45.         // dialog显示隐藏
  46.         dialogVisible: true,
  47.         dialogDrag: true, // 可拖拽
  48.         dialogChange: true, // 可拉伸
  49.         title: "详情",
  50.       },
  51.       commonsApplication: [
  52.         {
  53.           name: Math.random().toFixed(2),
  54.           Icon: require("../assets/img/nc1.png"),
  55.         },
  56.         {
  57.           name: "2222",
  58.           Icon: require("../assets/img/nc1.png"),
  59.         },
  60.         {
  61.           name: "3333",
  62.           Icon: require("../assets/img/nc1.png"),
  63.         },
  64.         {
  65.           name: "4444",
  66.           Icon: require("../assets/img/nc1.png"),
  67.         },
  68.         {
  69.           name: "5555",
  70.           Icon: require("../assets/img/nc1.png"),
  71.         },
  72.         {
  73.           name: "6666",
  74.           Icon: require("../assets/img/nc1.png"),
  75.         },
  76.       ],
  77.     };
  78.   },
  79.   created() {},
  80.   mounted() {},
  81.   methods: {
  82.     handleDrag() {
  83.       this.$refs.select.blur();
  84.     },
  85.   },
  86. };
  87. </script>
  88. <style>
  89. html,
  90. body {
  91.   padding: 0;
  92.   margin: 0;
  93. }
  94. .home {
  95.   width: 100%;
  96.   height: 100vh;
  97.   background: url("../assets/img/bg.png") no-repeat;
  98.   background-size: cover;
  99.   background-position: center center;
  100. }
  102. .el-dialog {
  103.   /* margin-top: 0 !important;
  104.   margin-bottom: 0 !important; */
  105.   margin: 0 auto !important;
  106. }
  108. .mouse {
  109.   background: grey;
  110.   position: absolute;
  111.   right: 0;
  112.   bottom: 0;
  113.   cursor: se-resize;
  114.   width: 10px;
  115.   height: 10px;
  116. }
  118. .ul {
  119.   display: flex;
  120.   flex-wrap: wrap;
  121.   text-align: center;
  122.   padding-bottom: 18px;
  123. }
  125. .li {
  126.   width: 25%;
  127.   margin: 5px 0px;
  128.   padding: 0 4px;
  130. }
  131. .app-border {
  132.   border: 1px solid #e2e3e7 !important;
  133.   background: #cccccc;
  134. }
  135. .app-border {
  136.   z-index: 99999999999999999 !important;
  137.   box-sizing: border-box;
  138.   border-radius: 8px;
  139.   position: relative;
  140.   padding: 5px;
  141. }
  142. .app-icon {
  143.   width: 48px;
  144.   height: 48px;
  145. }
  147. .helperClass{
  148.   z-index: 999999999;
  149. }
  151. .helperClass > .app-border {
  152.   border: 1px solid #e2e3e7 !important;
  153. }
  154. .helperClass > .app-border {
  155.   z-index: 99999999 !important;
  156.   box-sizing: border-box;
  157.   border-radius: 8px;
  158.   position: relative;
  159.   padding: 5px;
  160.   text-align: center;
  161. }
  162. </style>

拖拽组件 vue-slicksort 使用

第一步：安装

npm或yarn安装都可

  1. npm install vue-slicksort --save
  2. 或
  3. yarn add vue-slicksort

第二步：使用

  1. import { SlickList, SlickItem } from 'vue-slicksort'
  2. export default {
  3.   components: {
  4.     SlickList,
  5.     SlickItem,
  6.   },
  7.   data () {
  8.     return {
  9.       commonsApplication: []
  10.     }
  11.   }
  12. }

页面使用：

  1. <SlickList :lockToContainerEdges="false" :useWindowAsScrollContainer="false" :pressDelay="50" v-model="commonsApplication" helperClass="helperClass" class="ul" axis="xy">
  2.           <SlickItem v-for="(item,index) in commonsApplication" :index="index" :key="index+'key'" class="li">
  3.             <div class="app-border">
  4.               <img :src="item.Icon" class="app-icon">
  5.               <p>{
  6.    {item.name}}</p>
  7.             </div>
  8.           </SlickItem>
  9.         </SlickList>

页面样式：

  1. <style>
  2. html,
  3. body {
  4.   padding: 0;
  5.   margin: 0;
  6. }
  7. .home {
  8.   width: 100%;
  9.   height: 100vh;
  10.   background: url("../assets/img/bg.png") no-repeat;
  11.   background-size: cover;
  12.   background-position: center center;
  13. }
  15. .el-dialog {
  16.   /* margin-top: 0 !important;
  17.   margin-bottom: 0 !important; */
  18.   margin: 0 auto !important;
  19. }
  21. .mouse {
  22.   background: grey;
  23.   position: absolute;
  24.   right: 0;
  25.   bottom: 0;
  26.   cursor: se-resize;
  27.   width: 10px;
  28.   height: 10px;
  29. }
  31. .ul {
  32.   display: flex;
  33.   flex-wrap: wrap;
  34.   text-align: center;
  35.   padding-bottom: 18px;
  36. }
  38. .li {
  39.   width: 25%;
  40.   margin: 5px 0px;
  41.   padding: 0 4px;
  42. }
  43. .app-border {
  44.   border: 1px solid #e2e3e7 !important;
  45.   background: #cccccc;
  46. }
  47. .app-border {
  48.   z-index: 99999999999999999 !important;
  49.   box-sizing: border-box;
  50.   border-radius: 8px;
  51.   position: relative;
  52.   padding: 5px;
  53. }
  54. .app-icon {
  55.   width: 48px;
  56.   height: 48px;
  57. }
  59. .helperClass {
  60.   z-index: 999999999;
  61. }
  63. .helperClass > .app-border {
  64.   border: 1px solid #e2e3e7 !important;
  65. }
  66. .helperClass > .app-border {
  67.   z-index: 99999999 !important;
  68.   box-sizing: border-box;
  69.   border-radius: 8px;
  70.   position: relative;
  71.   padding: 5px;
  72.   text-align: center;
  73. }
  74. </style>

拖拽缩放，拖拽排序全部代码：

  1. <template>
  2.   <div class="home">
  4.     <el-dialog v-if="dialog.dialogVisible" v-dialogDrag:{dialogDrag}="dialog.dialogDrag" v-dialogChange:{dialogChange}="{value:dialog.dialogChange,maxw:1000,minw:600,ratio:0.6}" ref="dialogWrapper"
  5.       :close-on-click-modal="false" :title=dialog.title :visible.sync="dialog.dialogVisible">
  6.       <div class="dialog-body">
  7.         <SlickList :lockToContainerEdges="false" :useWindowAsScrollContainer="false" :pressDelay="50" v-model="commonsApplication" helperClass="helperClass" class="ul" axis="xy">
  8.           <SlickItem v-for="(item,index) in commonsApplication" :index="index" :key="index+'key'" class="li">
  9.             <div class="app-border">
  10.               <img :src="item.Icon" class="app-icon">
  11.               <p>{
  12.    {item.name}}</p>
  13.             </div>
  14.           </SlickItem>
  15.         </SlickList>
  16.       </div>
  18.       <slot slot="footer" class="dialog-footer">
  19.         <div class='mouse'>
  20.           <!-- 通过此模块拖拽缩放 -->
  21.         </div>
  22.       </slot>
  23.     </el-dialog>
  25.   </div>
  26. </template>
  28. <script>
  29. // @ is an alias to /src
  30. // import VueDragResize from "vue-drag-resize";
  31. // import elDragDialog from "@/directive/el-drag-dialog"; // base on element-ui
  32. import { SlickList, SlickItem } from "vue-slicksort";
  33. import VueGridLayout from "vue-grid-layout";
  34. export default {
  35.   name: "Home",
  36.   // directives: { elDragDialog },
  37.   components: {
  38.     SlickList,
  39.     SlickItem,
  40.     GridLayout: VueGridLayout.GridLayout,
  41.     GridItem: VueGridLayout.GridItem,
  42.   },
  43.   data() {
  44.     return {
  45.       dialog: {
  46.         // dialog显示隐藏
  47.         dialogVisible: true,
  48.         dialogDrag: true, // 可拖拽
  49.         dialogChange: true, // 可拉伸
  50.         title: "详情",
  51.       },
  52.       commonsApplication: [
  53.         {
  54.           name: Math.random().toFixed(2),
  55.           Icon: require("../assets/img/nc1.png"),
  56.         },
  57.         {
  58.           name: "2222",
  59.           Icon: require("../assets/img/nc1.png"),
  60.         },
  61.         {
  62.           name: "3333",
  63.           Icon: require("../assets/img/nc1.png"),
  64.         },
  65.         {
  66.           name: "4444",
  67.           Icon: require("../assets/img/nc1.png"),
  68.         },
  69.         {
  70.           name: "5555",
  71.           Icon: require("../assets/img/nc1.png"),
  72.         },
  73.         {
  74.           name: "6666",
  75.           Icon: require("../assets/img/nc1.png"),
  76.         },
  77.       ],
  78.     };
  79.   },
  80.   created() {},
  81.   mounted() {},
  82.   methods: {
  83.     handleDrag() {
  84.       this.$refs.select.blur();
  85.     },
  86.   },
  87. };
  88. </script>
  89. <style>
  90. html,
  91. body {
  92.   padding: 0;
  93.   margin: 0;
  94. }
  95. .home {
  96.   width: 100%;
  97.   height: 100vh;
  98.   background: url("../assets/img/bg.png") no-repeat;
  99.   background-size: cover;
  100.   background-position: center center;
  101. }
  103. .el-dialog {
  104.   /* margin-top: 0 !important;
  105.   margin-bottom: 0 !important; */
  106.   margin: 0 auto !important;
  107. }
  109. .mouse {
  110.   background: grey;
  111.   position: absolute;
  112.   right: 0;
  113.   bottom: 0;
  114.   cursor: se-resize;
  115.   width: 10px;
  116.   height: 10px;
  117. }
  119. .ul {
  120.   display: flex;
  121.   flex-wrap: wrap;
  122.   text-align: center;
  123.   padding-bottom: 18px;
  124. }
  126. .li {
  127.   width: 25%;
  128.   margin: 5px 0px;
  129.   padding: 0 4px;
  130. }
  131. .app-border {
  132.   border: 1px solid #e2e3e7 !important;
  133.   background: #cccccc;
  134. }
  135. .app-border {
  136.   z-index: 99999999999999999 !important;
  137.   box-sizing: border-box;
  138.   border-radius: 8px;
  139.   position: relative;
  140.   padding: 5px;
  141. }
  142. .app-icon {
  143.   width: 48px;
  144.   height: 48px;
  145. }
  147. .helperClass {
  148.   z-index: 999999999;
  149. }
  151. .helperClass > .app-border {
  152.   border: 1px solid #e2e3e7 !important;
  153. }
  154. .helperClass > .app-border {
  155.   z-index: 99999999 !important;
  156.   box-sizing: border-box;
  157.   border-radius: 8px;
  158.   position: relative;
  159.   padding: 5px;
  160.   text-align: center;
  161. }
  162. </style>

注意：vue-slicksort拖拽排序 原理是拖过拖拽时在元素外克隆一个节点，实现跟随鼠标，排序的原理是对数组重新排序，此时数组发生改变，如果特殊场景不想改变数组的话，请看下面的方法

稍后更新中………

发表评论

表情：
评论列表 （有 0 条评论，348人围观）

还没有评论，来说两句吧...

相关阅读

    相关 vue3.0拖拽缩放组件

    本人开发vue3.0拖拽缩放组件，持续更新中 （最新版本 0.3.0 支持 拖拽 、缩放、旋转、移动辅助线、激活和取消激活、复制粘贴、删除、键盘移动等功能，预计加入撤回操作、多

    秒速五厘米秒速五厘米/ 0 赞/ 346 阅读