实现一个可拖拽的vue指令

最新推荐文章于 2024-05-22 15:59:20 发布
最新推荐文章于 2024-05-22 15:59:20 发布
阅读量633 收藏 1
点赞数
分类专栏： vue 文章标签： js vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33332184/article/details/106382162
版权

代码

drag.js

import Vue from 'vue'
Vue.directive('dragx',(el, binding, vnode) => {
    //  默认参数
    let defaultOpts = {
        dragDirection: 'n, e, s, w, ne, se, sw, nw, all', // 东 e 西 w 南 s 北 n 东北ne 东南 se 西南 sw 西北 nw 全部 all
        dragContainerId: '',
        dragBarClass: '',  // 类选择器
        resizeEdge: 10,
        dirctDom: true,
        canDrag: true,
        canResize: true
    }
    let isMove = false;
    binding.value = binding.value || {};
    let cfg = Object.assign({}, defaultOpts, binding.value);

    // 获取目标元素 resize方向
    function getDirection(e) {
        let el = e.currentTarget;
        let dir = '';
        let rect = el.getBoundingClientRect();
        let win = el.ownerDocument.defaultView;
        let offset = {
            top: rect.top + win.pageYOffset,
            left: rect.left + win.pageXOffset,
            right: rect.right + win.pageXOffset,
            bottom: rect.bottom + win.pageYOffset,
        }
        // 东 E    西 W   南 S   北 N
        if(e.pageY > offset.top && e.pageY < offset.top + cfg.resizeEdge){
            dir += 'n'
        }
        else if(e.pageY < offset.bottom && e.pageY > offset.bottom - cfg.resizeEdge){
            dir += 's'
        }
        if (e.pageX > offset.left && e.pageX < offset.left + cfg.resizeEdge) {
            dir += 'w';
        }
        else if (e.pageX < offset.right && e.pageX > offset.right - cfg.resizeEdge) {
            dir += 'e';
        }
        if(binding.value) {
            let directions = cfg.dragDirection.split(',');
            for (let i = 0; i < directions.length; i++) {
                let handle = directions[i].replace(/(^\s*)|(\s*$)/g, '');
                if(handle == 'all' || handle === dir){
                    return dir
                }
            }
        }
        return '';
    }

    el.onmousedown = function (e) {
        isMove = false;
        // drag1
        if (cfg.dragBarClass.length > 0 && e.target.classList.contains(cfg.dragBarClass)) {
            isMove = true;
            document.body.style.cursor = 'move';
        }
        let dir = getDirection(e);
        let style = window.getComputedStyle(el);
        function getStyleNumValue(key) {
            return parseInt(style.getPropertyValue(key), 10)
        }
        let rect = el.getBoundingClientRect();
        let data = {
            width: getStyleNumValue("width"),
            height: getStyleNumValue("height"),
            left: getStyleNumValue("left"),
            top: getStyleNumValue("top"),
            borderLeft:getStyleNumValue("border-left-width"),
            borderTop:getStyleNumValue("border-top-width"),
            borderRight:getStyleNumValue("border-right-width"),
            borderBottom:getStyleNumValue("border-bottom-width"),
            deltX: e.pageX - rect.left, // 鼠标在元素内位置
            deltY: e.pageY - rect.top,
            startX: rect.left,  // 元素的位置
            startY: rect.top
        };
        if (dir === '' && !isMove) return;
        // 创建遮罩
        let mask = document.createElement("div");
        mask.style.cssText = "position:absolute;top:0px;bottom:0px;left:0px;right:0px;";
        document.body.appendChild(mask);
        document.onmousemove = function (edom) {
            // 获取当前鼠标位置
            // 右
            if (dir.indexOf("e") > -1) {
                data.width = edom.pageX - data.startX + data.borderLeft+data.borderRight;
            }
            // 下
            if (dir.indexOf("s") > -1) {
                data.height = edom.pageY - data.startY + data.borderBottom+data.borderTop;
            }
            // 上
            if (dir.indexOf("n") > -1) {
                let deltheight = data.startY + data.borderBottom + data.borderTop - edom.pageY;
                data.height += deltheight;
                data.top -= deltheight;
                data.startY -= deltheight;
            }
            // 左
            if (dir.indexOf("w") > -1) {
                let deltwidth = data.startX + data.borderLeft+data.borderRight- edom.pageX;
                data.width += deltwidth;
                data.left -= deltwidth;
                data.startX -= deltwidth;
            }
            // 移动
            if(isMove && cfg.canDrag){
                let targetPageX = edom.pageX;
                let targetPageY = edom.pageY;
                let deltX = targetPageX - data.startX - data.deltX;
                let deltY = targetPageY - data.startY - data.deltY;
                let newLeft = parseInt(getStyleNumValue('left') || '0', 10) + deltX;
                let newTop = parseInt(getStyleNumValue('top') || '0', 10) + deltY;
                console.log(window.innerWidth + data.borderLeft+data.borderRight - data.width - cfg.resizeEdge)
                if(newLeft <= 0){
                    newLeft = 0
                }
                else if(newLeft >= window.innerWidth - data.width - cfg.resizeEdge){
                    newLeft = window.innerWidth - data.width - cfg.resizeEdge
                }
                if(newTop <= 0){
                    newTop = 0
                }
                else if(newTop >= window.innerHeight - data.height - cfg.resizeEdge){
                    newLeft = window.innerHeight - data.height - cfg.resizeEdge
                }
                data.left = newLeft;
                data.top = newTop;
                data.startX = data.startX + deltX;
                data.startY = data.startY + deltY;
            }
            // 缩放
            if (cfg.dirctDom) {
                if(cfg.canResize){
                    el.style.width = data.width + "px";
                    el.style.height = data.height + "px";
                }
                if(cfg.canDrag){
                    el.style.left = data.left + 'px';
                    el.style.top = data.top + 'px';
                }
            }
            el.dispatchEvent(new CustomEvent('bindUpdate', {detail: data}))
        }
        document.onmouseup = function (e) {
            document.body.style.cursor = '';
            document.onmousemove = null;
            document.onmouseup = null;
            isMove = false;
            document.body.removeChild(mask);
        }
        document.body.style.cursor = dir + '-resize';
    }

    el.onmousemove = function (e) {
        if (cfg.dragBarClass.length > 0 && e.target.classList.contains(cfg.dragBarClass)&&cfg.canDrag) {
            el.style.cursor = 'move';
            return;
        }
        let dir = getDirection(e);
        if (dir !== '') {
            el.style.cursor = dir + '-resize';
            return;
        }
        el.style.cursor = '';
    }

    el.onmouseleave = function (e) {
        el.style.cursor = '';
    }
})

vue

<template>
        <div id="app1">
            <div id="box1" v-dragx="dragBox1">
                <div class="drag1"><b>开始拖拽</b></div>
            </div>
        </div>
</template>

<script>
    import "./../directive/dragx";
    export default {
        name: "App",
        data() {
            return {
                dragBox1: {
                    dragBarClass: "drag1",
                    dragContainerId: "app1"
                }
            };
        },
        methods:{
            bindUpdate(event){
                let data=event.detail;
              	console.log(data)
            }
        }
    };
</script>

<style>
    #app {
        font-family: "Avenir", Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        border: dashed 1px #000;
        height: 500px;
        position: relative;
    }
    #box1 {
        width: 100px;
        height: 100px;
        border: solid 1px rgba(33, 61, 223, 0.541);
        position: absolute;
        top: 50px;
        left: 200px;
        background-color: #2d7bf4;
    }
    .drag1{
        background-color:#ccc;
        border-top: solid 1px rgba(33, 61, 223, 0.541);
        border-bottom: solid 1px rgba(33, 61, 223, 0.541);
    }
</style>

开发思路

  • 通过鼠标移动实现组件移动，改变大小，一定需要操作dom，查看vue官方文档，从实用性，已经通用性，选择开发一个自定义vue指令

  • 通过鼠标移动产生的位移，动态改变大小或位置

  • 通过事件通知方式，实现更新bind值

所以有了以上思路，就需要一次掌握三个重要知识

  1. vue 如果开发一个自定义指令

  2. 鼠标移动过程中，MouseEvent对象各种值的含义

  3. 如何使用并分发一个自定义事件

vue指令文档：https://cn.vuejs.org/v2/guide/custom-directive.html#ad

vue对开发着提供(bind、inserted、update、componentUpdated、unbind)注入点。

  • bind 只调用一次，指令第一次绑定到元素时调用，主要完成指令初始化设置

  • inserted 被绑定元素插入父节点时调用，官网对这里有一个强调 仅保证父节点存在，但不一定被插入文档中

  • update 所在组件的VNode更新时调用，但也可能发生在其子VNode更新之前，所以提供的参数中包含 vnode oldVnode，具体是否需要响应操作，可以比较这两个node中对应的值是否变化

  • componentUpdated 指令所在组件的 VNode极其子VNode全部更新后调用，此钩子函数的补充，就可以解决update钩子，不及时更新问题。

  • unbind 只调用一次，指令与元素解绑是调用

每一个钩子都带有参数 el、binding、vnode、oldVnode

实现

  • 获取鼠标在目标元素上方向
//  默认参数
    let defaultOpts = {
        dragDirection: 'n, e, s, w, ne, se, sw, nw, all', // 东 e 西 w 南 s 北 n 东北ne 东南 se 西南 sw 西北 nw 全部 all
        dragContainerId: '',
        dragBarClass: '',  // 类选择器
        resizeEdge: 10,
        dirctDom: true,
        canDrag: true,
        canResize: true
    }
    let isMove = false;
    binding.value = binding.value || {};
    let cfg = Object.assign({}, defaultOpts, binding.value);

    // 获取目标元素 resize方向
    function getDirection(e) {
        let el = e.currentTarget;
        let dir = '';
        let rect = el.getBoundingClientRect();
        let win = el.ownerDocument.defaultView;
        let offset = {
            top: rect.top + win.pageYOffset,
            left: rect.left + win.pageXOffset,
            right: rect.right + win.pageXOffset,
            bottom: rect.bottom + win.pageYOffset,
        }
        // 东 E    西 W   南 S   北 N
        if(e.pageY > offset.top && e.pageY < offset.top + cfg.resizeEdge){
            dir += 'n'
        }
        else if(e.pageY < offset.bottom && e.pageY > offset.bottom - cfg.resizeEdge){
            dir += 's'
        }
        if (e.pageX > offset.left && e.pageX < offset.left + cfg.resizeEdge) {
            dir += 'w';
        }
        else if (e.pageX < offset.right && e.pageX > offset.right - cfg.resizeEdge) {
            dir += 'e';
        }
        if(binding.value) {
            let directions = cfg.dragDirection.split(',');
            for (let i = 0; i < directions.length; i++) {
                let handle = directions[i].replace(/(^\s*)|(\s*$)/g, '');
                if(handle == 'all' || handle === dir){
                    return dir
                }
            }
        }
        return '';
    }
  • 判断是否在目标元素里
cfg.dragBarClass.length > 0 
&& e.target.classList.contains(cfg.dragBarClass)
&& cfg.canDrag
  • 鼠标点击目标元素
el.onmousedown = function (e) {
        isMove = false;
        // drag1
        if (cfg.dragBarClass.length > 0 && e.target.classList.contains(cfg.dragBarClass)) {
            isMove = true;
            document.body.style.cursor = 'move';
        }
        let dir = getDirection(e);
        let style = window.getComputedStyle(el);
        function getStyleNumValue(key) {
            return parseInt(style.getPropertyValue(key), 10)
        }
        let rect = el.getBoundingClientRect();
        let data = {
            width: getStyleNumValue("width"),
            height: getStyleNumValue("height"),
            left: getStyleNumValue("left"),
            top: getStyleNumValue("top"),
            borderLeft:getStyleNumValue("border-left-width"),
            borderTop:getStyleNumValue("border-top-width"),
            borderRight:getStyleNumValue("border-right-width"),
            borderBottom:getStyleNumValue("border-bottom-width"),
            deltX: e.pageX - rect.left, // 鼠标在元素内位置
            deltY: e.pageY - rect.top,
            startX: rect.left,  // 元素的位置
            startY: rect.top
        };
        if (dir === '' && !isMove) return;
        // 创建遮罩
        let mask = document.createElement("div");
        mask.style.cssText = "position:absolute;top:0px;bottom:0px;left:0px;right:0px;";
        document.body.appendChild(mask);
        document.body.style.cursor = dir + '-resize';
}
  • 鼠标在目标元素上移动
document.onmousemove = function (edom) {
            // 获取当前鼠标位置
            // 右
            if (dir.indexOf("e") > -1) {
                data.width = edom.pageX - data.startX + data.borderLeft+data.borderRight;
            }
            // 下
            if (dir.indexOf("s") > -1) {
                data.height = edom.pageY - data.startY + data.borderBottom+data.borderTop;
            }
            // 上
            if (dir.indexOf("n") > -1) {
                let deltheight = data.startY + data.borderBottom + data.borderTop - edom.pageY;
                data.height += deltheight;
                data.top -= deltheight;
                data.startY -= deltheight;
            }
            // 左
            if (dir.indexOf("w") > -1) {
                let deltwidth = data.startX + data.borderLeft+data.borderRight- edom.pageX;
                data.width += deltwidth;
                data.left -= deltwidth;
                data.startX -= deltwidth;
            }
            // 移动
            if(isMove && cfg.canDrag){
                let targetPageX = edom.pageX;
                let targetPageY = edom.pageY;
                let deltX = targetPageX - data.startX - data.deltX;
                let deltY = targetPageY - data.startY - data.deltY;
                let newLeft = parseInt(getStyleNumValue('left') || '0', 10) + deltX;
                let newTop = parseInt(getStyleNumValue('top') || '0', 10) + deltY;
                console.log(window.innerWidth + data.borderLeft+data.borderRight - data.width - cfg.resizeEdge)
                if(newLeft <= 0){
                    newLeft = 0
                }
                else if(newLeft >= window.innerWidth - data.width - cfg.resizeEdge){
                    newLeft = window.innerWidth - data.width - cfg.resizeEdge
                }
                if(newTop <= 0){
                    newTop = 0
                }
                else if(newTop >= window.innerHeight - data.height - cfg.resizeEdge){
                    newLeft = window.innerHeight - data.height - cfg.resizeEdge
                }
                data.left = newLeft;
                data.top = newTop;
                data.startX = data.startX + deltX;
                data.startY = data.startY + deltY;
            }
            // 缩放
            if (cfg.dirctDom) {
                if(cfg.canResize){
                    el.style.width = data.width + "px";
                    el.style.height = data.height + "px";
                }
                if(cfg.canDrag){
                    el.style.left = data.left + 'px';
                    el.style.top = data.top + 'px';
                }
            }
            el.dispatchEvent(new CustomEvent('bindUpdate', {detail: data}))
        }
        document.onmouseup = function (e) {
            document.body.style.cursor = '';
            document.onmousemove = null;
            document.onmouseup = null;
            isMove = false;
            document.body.removeChild(mask);
        }
niuyueyang
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于Vue 撸一个指令实现拖拽功能
10-16
在提供的代码示例中，作者创建了一个名为`vDrag`的Vue指令。该指令在插入元素时执行以下操作： - 找到对话框组件的容器元素（target）和可拖动的头部区域（header）。 - 将header的cursor样式设置为'move'，以提示...
VUE实现可随意拖动的弹窗组件
10-17
在Vue.js中实现一个可随意拖动的弹窗组件，主要涉及到事件监听、CSS样式以及组件的状态管理。这个组件主要用于解决在PC端使用时，没有现成的可拖动弹窗功能的问题。以下是对实现该功能的关键知识点的详细说明： 1. ...
vue侧边栏可拖拽，右侧区域可自适应宽度
不想搞技术的的cc不是好cc
10-21 3547
今天工作中遇到一个需求，侧边栏增加一可拖拽条，拖拽后左右两边都能自适应宽度。查阅相关实现，发现这种方法亲测可用，在此记录一下。4.可以修改自定义命令,设置一个最小拖拽宽度。
前端学习（2489）：初识vue以及引入vue
歌谣的博客
11-02 604
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta ht...
「Vue自定义指令添加拖拽功能」
最新发布
qq_41238459的博客
05-22 167
Vue自定义指令添加拖拽功能
前端跨容器的元素拖拽功能
Lucky_Q的博客
08-20 903
之前用过一个vue的插件叫vue-slicksort，专门用来拖动元素的，但是只支持标签内拖拽，跨标签的拖拽暂时还不知道有没有这样的一款插件。自己动手丰衣足食，虽然这个是在vue环境下作的，但逻辑也都是原生js写的，所以vue还是其他什么框架的也都无所谓。 html结构 <template> <div class="hello"> <div class=...
vue-拖拽指令 （v-drag）
ltf-spaceweixin_46032911的博客
10-31 1642
vue2完整版，自定义指令实现
vue v-drag拖拽指令
qq_38359639的博客
04-16 354
【代码】vue v-drag拖拽指令。
vue使用自定义指令实现拖拽
10-16
主要为大家详细介绍了vue使用自定义指令实现拖拽，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Vue使用自定义指令实现拖拽行为实例分析
10-15
在这个实例中，我们将深入理解如何利用自定义指令来实现一个简单的拖拽功能，并关注如何阻止拖拽元素内部的子元素参与拖拽。 首先，我们创建一个名为`v-drag`的自定义指令。这个指令的主要任务是监听鼠标事件，改变...
vue 拖拽元素的移动 ——自定义指令
web_hj的博客
05-11 1924
/////////////// 私有指令 directives: { drag: { //指令的定义 inserted:function(el) { el.onmousedown=function(e) { //获取鼠标点击处分别与div左边和上边的距离：鼠标位置-div位置 letdivx = e.clientX - el.offsetLeft; letdivy = e.cli...
Vue自定义指令拖拽功能示例
08-31
本文给大家分享vue自定义指令拖拽功能及自定义键盘信息，非常不错，具有参考借鉴价值，需要的的朋友参考下
Vue元素拖拽-通过自定义指令实现
m0_61014988的博客
03-05 657
通过Vue自定义指令，实现拖拽元素
vue3 自定义拖拽指令(德芙一般丝滑)
leleshuo
02-11 2202
德芙般丝滑体验拖拽
vue3 拖动指令
weixin_44588893的博客
02-17 415
vue3 自定义拖动指令
VUE指令：拖拽
Aerozb的博客
03-24 118
directives:{ // 拖动 drag(el, binding) { let oDiv = el; //当前元素 oDiv.onmousedown = function (e) { e.preventDefault(); let bw = document.body.clientWidth; let bh = document.body.clientHeight; //鼠标按下，计算当
vue.js可拖动指令
muzibai9的博客
11-25 214
vue.js可拖动组件背景解决方案通用模块 Vue.DraggableV-directives vue指令 背景 在做vue.js的web开发的时候，碰到需要制作一个对modal提示框做一个可拖动处理。 解决方案 1、通常遇到需要重新开发的功能或者组件，第一考虑使用现已有的组件进行开发，这样就可以使modal框进行拖动，并且只需要将这些modal框放进该组件的标签中即可，方便简洁。通用模块Vue.Draggable。 2、但同时也会有很多问题，比如说如果我们需要修改的页面或者组件量过于庞大，或者项目不允许使
Vue指令可拖动元素，兼容PC和移动端
warmbook的博客
03-04 1414
Vue.directive('movable',{ bind(el){ let agent=window.navigator.userAgent.toLowerCase(),start,move,end //判断当前是移动端还是PC，移动端监听touch，PC监听mouse if(["android","iphone","symbianos","windows phon...
vue中通过自定义指令实现拖拽功能
weixin_58032613的博客
02-14 654
本文详细的讲解了如何使用自定义指令实现js的拖拽功能
帮我实现一个拖拽弹窗头部的vue 自定义指令
06-06
好的，以下是一个实现拖拽弹窗头部的 Vue 自定义指令： ```js // draggable.js const draggable = { bind: function(el, binding, vnode) { let isDragging = false; let x = 0; let y = 0; let initialX = 0;...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值