正文

vue.之elementdialog拖拽(代码片段)

公子缘  公子缘  2022-12-22  410

关键词：

Vue. 之 Element dialog 拖拽

　　默认情况下，在使用Element的Dialog模块时，弹出框是不能移动的，且一旦点击遮罩层区域，弹框就会消失。

　　解决方案：

　　1 在 utils 中新建 directives.js 文件

import Vue from ‘vue‘

// v-dialogDrag: 弹窗拖拽
Vue.directive(‘dialogDrag‘, 
  bind(el, binding, vnode, oldVnode) 
    const dialogHeaderEl = el.querySelector(‘.el-dialog__header‘)
    const dragDom = el.querySelector(‘.el-dialog‘)
    dialogHeaderEl.style.cursor = ‘move‘

    // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
    const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null)

    dialogHeaderEl.onmousedown = (e) => 
      // 鼠标按下，计算当前元素距离可视区的距离
      const disX = e.clientX - dialogHeaderEl.offsetLeft
      const disY = e.clientY - dialogHeaderEl.offsetTop

      // 获取到的值带px 正则匹配替换
      let styL, styT

      // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
      if (sty.left.includes(‘%‘)) 
        styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, ‘‘) / 100)
        styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, ‘‘) / 100)
       else 
        styL = +sty.left.replace(/\px/g, ‘‘)
        styT = +sty.top.replace(/\px/g, ‘‘)
      

      document.onmousemove = function(e) 
        // 通过事件委托，计算移动的距离
        const l = e.clientX - disX
        const t = e.clientY - disY

        // 移动当前元素
        dragDom.style.left = `$l + styLpx`
        dragDom.style.top = `$t + styTpx`

        // 将此时的位置传出去
        // binding.value(x:e.pageX,y:e.pageY)
      

      document.onmouseup = function(e) 
        document.onmousemove = null
        document.onmouseup = null
      
    
  
)

// v-dialogDragWidth: 弹窗宽度拖大 拖小
Vue.directive(‘dialogDragWidth‘, 
  bind(el, binding, vnode, oldVnode) 
    const dragDom = binding.value.$el.querySelector(‘.el-dialog‘)

    el.onmousedown = (e) => 
      // 鼠标按下，计算当前元素距离可视区的距离
      const disX = e.clientX - el.offsetLeft

      document.onmousemove = function(e) 
        e.preventDefault() // 移动时禁用默认事件

        // 通过事件委托，计算移动的距离
        const l = e.clientX - disX
        dragDom.style.width = `$lpx`
      

      document.onmouseup = function(e) 
        document.onmousemove = null
        document.onmouseup = null
      
    
  
)

2. main.js中导入：import ‘./utils/directives.js‘

3. 使用 el-dialog 的地方加入 v-dialogDrag

<el-dialog 
        title="添加新的变量" 
        :visible.sync="setAddDialogFormVisible" 
        width="35%" 
        v-dialogDrag>
</el-dialog>

vue实现拖拽(代码片段)

简单的拖拽拖拽1、screenX和screenY2、clientX和clientY3、pageX和pageY4、offsetX和offsetY实现拖拽拖拽拖拽是我们在项目开发中，必不可少的技能之一，关于拖拽，我们有些人很是头疼，因为搞不懂搞用哪个属性，那么我... 查看详情

vue基于vuedraggable实现拖拽(代码片段)

进入项目目录npmivuedraggable-S在vue页面script中引入并且注册<draggablev-model="resultList"@end="dragged"><divv-for="iteminresultList"v-if=' 查看详情

vue：制作一个通用的拖拽组件(代码片段)

废话不多说，直接上代码FloatContainer.vue<scriptsetup>importonMounted,onUnmountedfrom"vue";constdragId=`drag-div-$newDate().getTime()`;letdragDiv;onMounted(()=>dragDiv= 查看详情

javascript之实现登录框拖拽效果(代码片段)

...求分析点击弹出登录框在登录框的特定区域可以将登录框拖拽至任意位置可以关闭登录框，并且下一次点击弹出登录框归位具体实现完整代码<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><m... 查看详情

vue实现bar左右拖拽(代码片段)

效果图功能实现bar左右拖拽左侧：js通过width控制 :style="width: lwidth"右侧：盒子设置定位position，js通过的left来控制，同时样式需要设置 right: 0; bottom: 0; 才会出现width中间：设置定位position，使用calc计算... 查看详情

如何在vue中实现拖拽(代码片段)

1、npmi vuedraggable2、在组件中引入importvuedraggablefrom'vuedraggable';3、<template><vuedraggableclass="wrapper"v-model="list"><transition-group><divv-for& 查看详情

vue拖拽交换数据（非插件）(代码片段)

HelloWorld.vue文件<template><divclass="hello"><h1>msg</h1><div><divclass="team"v-for="(team,tindex)inteamDataArr":key="tindex"><divclass="member"v-for="(item,c 查看详情

前端开发之vue-grid-layout的使用和实例(代码片段)

...a;，前言VueGridLayout官方文档VueGridLayout中文文档可通过拖拽改变布局（如果我们做简易开发，通过拖拽组件形成页面或者有这个需求就是非常实用的了）因为vue-grid-layout是vue2版本的但自己用的是vue3版本，所以... 查看详情

vue+element+vuedraggable实现拖拽排序(代码片段)

准备工作首先使用yarnaddvuedraggable或者npmi-Svuedraggable安装组件。<draggable v-model="codeList" @update="datadragEnd" :options="animation:200"> <divclass=" 查看详情

工具vue文件上传(单个/多个)，拖拽上传(代码片段)

本文单传组件取自若依微服务为版ruoyi-ui：http://doc.ruoyi.vip/ruoyi-cloud/环境：vue@2.6.12 element-ui@2.15.3 1.文件上传(单个) 组件代码：//components/FileUpload<template><divclass="uploa 查看详情

vue下使用echarts折线图及其横坐标拖拽功能(代码片段)

...用折线图，并且有时间段筛选。因此就需要用到横坐标的拖拽功能。界面效果如下：现在来看这个效果的实现代码：drawLine()letthat=this,lineDate=[],dispatchCount=[],finishCount=[],newCount=[];letparam=//参数;axios.post(url,param).then(function(response) 查看详情

基于vue实现可以拖拽的树形表格实例详解(代码片段)

因业务需求，需要一个树形表格，并且支持拖拽排序，任意未知插入，github搜了下，真不到合适的，大部分树形表格都没有拖拽功能，所以决定自己实现一个。这里分享一下实现过程，项目源代码请看github，插件已打包封装好，... 查看详情

vue2-dragulavue拖拽组件(代码片段)

...droplibrary,basedon vue-dragula by @Astray-git.vue为dragula拖拽包装减少代码，基于 vue-dragula。Thislibraryhasbeenrefactored,upgradedandextendedwithpowerfulnewfeaturesforusewithVue2.代码已经被重构了，为vue2升级并且延申了有用的新特性C... 查看详情

vue-draggable-resizable拖拽缩放插件(代码片段)

安装：npm install --save vue-draggable-resizable使用：<template> <div style="height: 500px; width: 500px; border: 1px solid red;&nb 查看详情

elementui系列一vue拖拽功能实现-vuedraggable实现多层嵌套拖拽(代码片段)

拖拽功能组件awe-dnd和vue-draggable做了一番比较，最终选择了vue-draggable，至于原因：vue-draggable的@start和@end只会在拖拽元素移动的开始和结束时触发，过程中不会触发awe-dnd会一直监听拖拽的过程，在拖拽的... 查看详情

vue集成dhtmlx。实现列表到树形的拖拽(代码片段)

效果查看：将右侧菜单拖拽入左侧树中：1，public引入dhtmlx,并在index.html中引用：2，封装vue组件：<template><divid="dhtmlTree"style="width:95%;height:100%;overflow:au 查看详情

elementui可拖拽dialog-vue2(代码片段)

文章目录1.准备js1.1`dialog-drag.js`1.2`index.js`2.`main.js`引用自定义指令3.使用1.准备js1.1dialog-drag.jsimportVuefrom'vue'/**使用方法*将以下代码复制到一个js文件中，然后在入口文件main.js中import引入即可；查看详情

10分钟实现简易vue拖拽排序(代码片段)

...的一些细节之后,终于是有条不紊的进行了。But,一个Vue的拖拽排序功能如何实现却让我犯了难,在痛苦的学习中我终于明白了这个东西是怎么玩的记录的同时进行分享,希望能帮助到有同样需查看详情