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

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

![20200918000407873.gif][]

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

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

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

### drag自定义指令 ###

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

import Vue from 'vue'
    // v-dialogDrag: 弹窗拖拽属性
    Vue.directive('dialogDrag', {
        bind(el, binding, vnode, oldVnode) {
            // 自定义属性，判断是否可拖拽　
            if (!binding.value) return
            const dialogHeaderEl = el.querySelector('.el-dialog__header') //.drag-dialog-box
            const dragDom = el.querySelector('.el-dialog')
            dialogHeaderEl.style.cssText += ';cursor:move;'
            dragDom.style.cssText += ';top:150px;'
    
            // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
            const sty = (function () {
                if (document.body.currentStyle) {
                    // 在ie下兼容写法
                    return (dom, attr) => dom.currentStyle[attr]
                } else {
                    return (dom, attr) => getComputedStyle(dom, false)[attr]
                }
            })()
    
            dialogHeaderEl.onmousedown = (e) => {
                // 鼠标按下，计算当前元素距离可视区的距离
                const disX = e.clientX - dialogHeaderEl.offsetLeft
                const disY = e.clientY - dialogHeaderEl.offsetTop
    
                const screenWidth = document.body.clientWidth // body当前宽度
                const screenHeight = document.documentElement.clientHeight // 可见区域高度(应为body高度，可某些环境下无法获取)
    
                const dragDomWidth = dragDom.offsetWidth // 对话框宽度
                const dragDomheight = dragDom.offsetHeight // 对话框高度
    
                const minDragDomLeft = dragDom.offsetLeft
                const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth
    
                const minDragDomTop = dragDom.offsetTop
                const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomheight
    
                // 获取到的值带px 正则匹配替换
                let styL = sty(dragDom, 'left')
                // 为兼容ie　
                if (styL === 'auto') styL = '0px'
                let styT = sty(dragDom, 'top')
    
                // console.log(styL)
                // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
                if (styL.includes('%')) {
                    styL = +document.body.clientWidth * (+styL.replace(/%/g, '') / 100)
                    styT = +document.body.clientHeight * (+styT.replace(/%/g, '') / 100)
                } else {
                    styL = +styL.replace(/px/g, '')
                    styT = +styT.replace(/px/g, '')
                };
    
                document.onmousemove = function (e) {
                    // 通过事件委托，计算移动的距离
                    let left = e.clientX - disX
                    let top = e.clientY - disY
                    // 边界处理
                    if (-(left) > minDragDomLeft) {
                        left = -(minDragDomLeft)
                    } else if (left > maxDragDomLeft) {
                        left = maxDragDomLeft
                    }
    
                    if (-(top) > minDragDomTop) {
                        top = -(minDragDomTop)
                    } else if (top > maxDragDomTop) {
                        top = maxDragDomTop
                    }
    
                    // 移动当前元素
                    dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`
    
                    // emit onDrag event
                    vnode.child.$emit('dragDialog')
                }
    
                document.onmouseup = function (e) {
                    document.onmousemove = null
                    document.onmouseup = null
                }
                return false
            }
        }
    })
    
    
    
    /* binding 
    value:{
        value:boolean是否可拉伸 （必传）
        minw:Number最小宽 （必传）
        maxw:Number最大宽 （必传）
        minh:Number最小高 （必传）
        maxh:Number 最大高 （必传）
        ratio:Number宽高比 （非必传）
        ratio?
        minw:Number最小宽 （必传）
        maxw:Number最大宽 （必传）
        minh:Number最小高 （非必传）
        maxh:Number 最大高 （非必传）
     } */
    Vue.directive('dialogChange', {
        bind(el, binding, vnode, oldVnode) {
            // 自定义属性，判断是否可拉伸
            const bindVal = binding.value
            console.log(bindVal, "binding")
    
            if (!bindVal.value) return
            const dragDom = el.querySelector('.el-dialog')
            // console.log(dragDom,"拖拽属性")
            let dragMouse
            // 在弹出框的右下角添加可拉伸标志 class='mouse'
            for (let i = 0; i < dragDom.childNodes[2].childNodes.length; i++) {
                if (dragDom.childNodes[2].childNodes[i].className === 'mouse') {
                    dragMouse = dragDom.childNodes[2].childNodes[i]
                }
            }
    
            // 鼠标拖拽
            dragMouse.onmousedown = (e) => {
                // content区域
                const content = dragDom.parentNode.parentNode.parentNode.parentNode.parentNode
                console.log(content, "llllllllllllllllllllllllllllllll")
                const disX = e.clientX - dragDom.offsetWidth
                const disY = e.clientY - dragDom.offsetHeight
                console.log(e, disX, disY, "0000")
    
    
                document.onmousemove = function (e) {
                    e.preventDefault() // 移动时禁用默认事件
                    // 通过事件委托，计算移动的距离
    
                    let width = e.clientX - disX
                    let height = e.clientY - disY
                    console.log(e.clientX, e.clientY, content.offsetWidth, content.offsetHeight, width, height, "sssss")
    
                    // 距离底部20px停止拖动
                    if (e.clientY > content.offsetHeight - 20) {
                        console.log("不能再拖了")
                        return
                    } else {
                        if (!!bindVal.ratio) {
                            // 设置比例 宽高等比缩放
    
                            if (width < content.offsetWidth && height < content.offsetHeight) {
                                if (!!bindVal.minw && bindVal.minw < width && !!bindVal.maxw && width < bindVal.maxw) {
                                    dragDom.style.width = `${width}px`
                                    dragDom.style.height = `${width * bindVal.ratio}px`
                                    vnode.child.$emit('dragDialogHeight',width * bindVal.ratio)
                                }
                                // dragDom.style.height = `${width*0.6}px`
                                // dragDom.style.height = `${height}px`
                            }
                        } else {
                            // 不设置比例 宽高随意拖动
                            if (width > content.offsetWidth && height < content.offsetHeight) {
                                if (!!bindVal.minh && bindVal.minh < height && !!bindVal.maxh && height < bindVal.maxh) {
                                    dragDom.style.height = `${height}px`
                                }
                            } else if (width < content.offsetWidth && height > content.offsetHeight) {
                                if (!!bindVal.minw && bindVal.minw < width && !!bindVal.maxw && width < bindVal.maxw) {
                                    dragDom.style.width = `${width}px`
                                }
                            } else if (width < content.offsetWidth && height < content.offsetHeight) {
                                if (!!bindVal.minh && bindVal.minh < height && !!bindVal.maxh && height < bindVal.maxh) {
                                    dragDom.style.height = `${height}px`
                                }
                                if (!!bindVal.minw && bindVal.minw < width && !!bindVal.maxw && width < bindVal.maxw) {
                                    dragDom.style.width = `${width}px`
                                }
                                // dragDom.style.height = `${width*0.6}px`
                                // dragDom.style.height = `${height}px`
                            }
                        }
                    }
    
    
    
    
                }
                document.onmouseup = function (e) {
                    document.onmousemove = null
                    document.onmouseup = null
                }
                return false
            }
    
    
        }
    })

2、在main.js中引用

import './components/dialog'

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

<template>
      <div class="home">
    
        <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"
          :close-on-click-modal="false" :title=dialog.title :visible.sync="dialog.dialogVisible">
          <div class="dialog-body">
            <SlickList :lockToContainerEdges="false" :useWindowAsScrollContainer="false" :pressDelay="50" v-model="commonsApplication" helperClass="helperClass" class="ul" axis="xy">
              <SlickItem v-for="(item,index) in commonsApplication" :index="index" :key="index+'key'" class="li">
                <div class="app-border">
                  <img :src="item.Icon" class="app-icon">
                  <p>{
       {item.name}}</p>
                </div>
              </SlickItem>
            </SlickList>
          </div>
     
          <slot slot="footer" class="dialog-footer">
    
            <div class='mouse'>
                 
    
            </div>
          </slot>
        </el-dialog>
    
      </div>
    </template>
    
    <script>
    // @ is an alias to /src
    // import VueDragResize from "vue-drag-resize";
    // import elDragDialog from "@/directive/el-drag-dialog"; // base on element-ui
    import { SlickList, SlickItem } from "vue-slicksort";
    export default {
      name: "Home",
      // directives: { elDragDialog },
      components: {
        SlickList,
        SlickItem,
      },
      data() {
        return {
          dialog: {
            // dialog显示隐藏
            dialogVisible: true,
            dialogDrag: true, // 可拖拽
            dialogChange: true, // 可拉伸
            title: "详情",
          },
          commonsApplication: [
            {
              name: Math.random().toFixed(2),
              Icon: require("../assets/img/nc1.png"),
            },
            {
              name: "2222",
              Icon: require("../assets/img/nc1.png"),
            },
            {
              name: "3333",
              Icon: require("../assets/img/nc1.png"),
            },
            {
              name: "4444",
              Icon: require("../assets/img/nc1.png"),
            },
            {
              name: "5555",
              Icon: require("../assets/img/nc1.png"),
            },
            {
              name: "6666",
              Icon: require("../assets/img/nc1.png"),
            },
          ],
        };
      },
      created() {},
      mounted() {},
      methods: {
        handleDrag() {
          this.$refs.select.blur();
        },
      },
    };
    </script>
    <style>
    html,
    body {
      padding: 0;
      margin: 0;
    }
    .home {
      width: 100%;
      height: 100vh;
      background: url("../assets/img/bg.png") no-repeat;
      background-size: cover;
      background-position: center center;
    }
    
    .el-dialog {
      /* margin-top: 0 !important;
      margin-bottom: 0 !important; */
      margin: 0 auto !important;
    }
    
    .mouse {
      background: grey;
      position: absolute;
      right: 0;
      bottom: 0;
      cursor: se-resize;
      width: 10px;
      height: 10px;
    }
    
    .ul {
      display: flex;
      flex-wrap: wrap;
      text-align: center;
      padding-bottom: 18px;
    }
    
    .li {
      width: 25%;
      margin: 5px 0px;
      padding: 0 4px;
      
    }
    .app-border {
      border: 1px solid #e2e3e7 !important;
      background: #cccccc;
    }
    .app-border {
      z-index: 99999999999999999 !important;
      box-sizing: border-box;
      border-radius: 8px;
      position: relative;
      padding: 5px;
    }
    .app-icon {
      width: 48px;
      height: 48px;
    }
    
    .helperClass{
      z-index: 999999999;
    }
    
    .helperClass > .app-border {
      border: 1px solid #e2e3e7 !important;
    }
    .helperClass > .app-border {
      z-index: 99999999 !important;
      box-sizing: border-box;
      border-radius: 8px;
      position: relative;
      padding: 5px;
      text-align: center;
    }
    </style>

### 拖拽组件 [vue-slicksort][] 使用 ###

第一步：安装

npm或yarn安装都可

npm install vue-slicksort --save
    或
    yarn add vue-slicksort

第二步：使用

import { SlickList, SlickItem } from 'vue-slicksort'
    export default {
      components: {
        SlickList,
        SlickItem,
      },
      data () {
        return {
          commonsApplication: []
        }
      }
    }

页面使用：

页面样式：

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

<template>
      <div class="home">
    
        <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"
          :close-on-click-modal="false" :title=dialog.title :visible.sync="dialog.dialogVisible">
          <div class="dialog-body">
            <SlickList :lockToContainerEdges="false" :useWindowAsScrollContainer="false" :pressDelay="50" v-model="commonsApplication" helperClass="helperClass" class="ul" axis="xy">
              <SlickItem v-for="(item,index) in commonsApplication" :index="index" :key="index+'key'" class="li">
                <div class="app-border">
                  <img :src="item.Icon" class="app-icon">
                  <p>{
       {item.name}}</p>
                </div>
              </SlickItem>
            </SlickList>
          </div>
    
          <slot slot="footer" class="dialog-footer">
            <div class='mouse'>
              
            </div>
          </slot>
        </el-dialog>
    
      </div>
    </template>
    
    <script>
    // @ is an alias to /src
    // import VueDragResize from "vue-drag-resize";
    // import elDragDialog from "@/directive/el-drag-dialog"; // base on element-ui
    import { SlickList, SlickItem } from "vue-slicksort";
    import VueGridLayout from "vue-grid-layout";
    export default {
      name: "Home",
      // directives: { elDragDialog },
      components: {
        SlickList,
        SlickItem,
        GridLayout: VueGridLayout.GridLayout,
        GridItem: VueGridLayout.GridItem,
      },
      data() {
        return {
          dialog: {
            // dialog显示隐藏
            dialogVisible: true,
            dialogDrag: true, // 可拖拽
            dialogChange: true, // 可拉伸
            title: "详情",
          },
          commonsApplication: [
            {
              name: Math.random().toFixed(2),
              Icon: require("../assets/img/nc1.png"),
            },
            {
              name: "2222",
              Icon: require("../assets/img/nc1.png"),
            },
            {
              name: "3333",
              Icon: require("../assets/img/nc1.png"),
            },
            {
              name: "4444",
              Icon: require("../assets/img/nc1.png"),
            },
            {
              name: "5555",
              Icon: require("../assets/img/nc1.png"),
            },
            {
              name: "6666",
              Icon: require("../assets/img/nc1.png"),
            },
          ],
        };
      },
      created() {},
      mounted() {},
      methods: {
        handleDrag() {
          this.$refs.select.blur();
        },
      },
    };
    </script>
    <style>
    html,
    body {
      padding: 0;
      margin: 0;
    }
    .home {
      width: 100%;
      height: 100vh;
      background: url("../assets/img/bg.png") no-repeat;
      background-size: cover;
      background-position: center center;
    }
    
    .el-dialog {
      /* margin-top: 0 !important;
      margin-bottom: 0 !important; */
      margin: 0 auto !important;
    }
    
    .mouse {
      background: grey;
      position: absolute;
      right: 0;
      bottom: 0;
      cursor: se-resize;
      width: 10px;
      height: 10px;
    }
    
    .ul {
      display: flex;
      flex-wrap: wrap;
      text-align: center;
      padding-bottom: 18px;
    }
    
    .li {
      width: 25%;
      margin: 5px 0px;
      padding: 0 4px;
    }
    .app-border {
      border: 1px solid #e2e3e7 !important;
      background: #cccccc;
    }
    .app-border {
      z-index: 99999999999999999 !important;
      box-sizing: border-box;
      border-radius: 8px;
      position: relative;
      padding: 5px;
    }
    .app-icon {
      width: 48px;
      height: 48px;
    }
    
    .helperClass {
      z-index: 999999999;
    }
    
    .helperClass > .app-border {
      border: 1px solid #e2e3e7 !important;
    }
    .helperClass > .app-border {
      z-index: 99999999 !important;
      box-sizing: border-box;
      border-radius: 8px;
      position: relative;
      padding: 5px;
      text-align: center;
    }
    </style>

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

稍后更新中.........

[20200918000407873.gif]: /images/20221123/1334e552055248648f66c283861f6f11.png
[vue-slicksort]: https://www.npmjs.com/package/vue-slicksort