封装一个可拖拽移动、可拖拽调整容器大小的组件

最新推荐文章于 2024-11-07 20:46:13 发布
原创 最新推荐文章于 2024-11-07 20:46:13 发布 · 273 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #vue.js #前端

效果示例在这里插入图片描述

DragResizeContainer组件

<!--可拖拽移动、可通过拖拽调整容器大小的组件-->
<template>
    <div ref="dragBox" class="main" :style="{ zIndex: zIndex }" v-change-z-index>
        <div :ref="DARG_LINE.T_LINE" class="resize-y border-t"></div>
        <div class="g-flex">
            <div :ref="DARG_LINE.L_LINE" class="resize-x border-l"></div>
            <div ref="dragBoxContent" :style="{ width: width + 'px', height: height + 'px' }">
                <slot name="content"></slot>
            </div>
            <div :ref="DARG_LINE.R_LINE" class="resize-x border-r"></div>
        </div>
        <div :ref="DARG_LINE.B_LINE" class="resize-y border-b"></div>
        <div ref="resizeXYRef" class="resize-xy"></div>
    </div>
</template>
<script>
const DARG_LINE = {
    T_LINE: 'topLine',
    B_LINE: 'bottomLine',
    R_LINE: 'rightLine',
    L_LINE: 'leftLine',
}
export default {
    name: 'DragResizeContainer',
    props: {
        parentDom: {
            type: HTMLElement,
            default: null,
        }, //父节点
        positionConfig: {
            type: Object,
            default: () => {
                return {}
            },
        }, //默认定位配置
        zIndex: {
            type: String,
            default: '100',
        }, //容器层级
        height: {
            type: [String, Number],
            default: '0',
        }, //内容高度
        width: {
            type: [String, Number],
            default: '0',
        }, //内容宽度
        safeDistance: {
            type: Object,
            default: () => {
                return {
                    top: 0,
                    left: 0,
                    right: 0,
                    bottom: 0,
                }
            },
        }, //安全距离
        minHeight: {
            type: [String, Number],
            default: 10,
        }, //最小高度
        maxHeight: {
            type: [String, Number],
            default: 800,
        }, //最大高度
        minWidth: {
            type: [String, Number],
            default: 10,
        }, //最小宽度
        maxWidth: {
            type: [String, Number],
            default: 1200,
        }, //最大宽度
        canDrag: {
            type: Boolean,
            default: false,
        }, //是否支持拖拽
        horizontalMove: {
            type: Boolean,
            default: true,
        }, //是否支持横向拖拽
        verticalMove: {
            type: Boolean,
            default: true,
        }, //是否支持纵向拖拽
        leftLine: {
            type: Boolean,
            default: true,
        }, //是否支持左侧拖拽
        rightLine: {
            type: Boolean,
            default: true,
        }, //是否支持右侧拖拽
        topLine: {
            type: Boolean,
            default: true,
        }, //是否支持顶部拖拽
        bottomLine: {
            type: Boolean,
            default: true,
        }, //是否支持底部拖拽
        rightBottomLine: {
            type: Boolean,
            default: true,
        },//是否支持右下角拖拽
        disableUserSelect: {
            type: Boolean,
            default: true,
        }, //是否禁用用户选择文本
    },
    data() {
        return {
            DARG_LINE,
            startResize: false,
            RESIZE_LINE_ARR: [
                DARG_LINE.B_LINE,
                DARG_LINE.L_LINE,
                DARG_LINE.R_LINE,
                DARG_LINE.T_LINE,
            ],
            tempUserSelect: '',
        }
    },
    mounted() {
        this.$nextTick(() => {
            //如果通过:style 动态绑定到根元素上，发现通过js style.left修改样式不生效，这样写只在初始绑定一次
            Object.keys(this.positionConfig).forEach(key => {
                const dragBox = this.$refs.dragBox
                dragBox.style[key] = this.positionConfig[key]
            })
            this.resizeLineInit()
            this.resizeXYInit()
            this.dragInit()
            this.setZIndexTopFn(this.$refs.dragBox)
        })
    },
    methods: {
        /**
         * 修改弹窗层级
         * @param dom
         */
        setZIndexTopFn(dom) {
            if (dom) {
                this.$utils.setZIndexTop(dom)
            }
        },
        dragInit() {
            const parentDom = this.parentDom
            const dragBoxContent = this.$refs.dragBoxContent
            const dragBox = this.$refs.dragBox
            let startX, startY, initialLeft, initialTop
            dragBoxContent.addEventListener('mousedown', (event) => {
                if (!this.canDrag) return
                if (this.disableUserSelect) {
                    this.tempUserSelect = document.body.style.userSelect
                    document.body.style.userSelect = 'none'
                }
                startX = event.clientX
                startY = event.clientY
                const {left, top} = dragBoxContent.getBoundingClientRect()
                initialLeft = left
                initialTop = top
                document.addEventListener('mousemove', onMouseMove)
                document.addEventListener('mouseup', onMouseUp, {once: true})
            })
            const onMouseMove = (event) => {
                const offsetX = event.clientX - startX
                const offsetY = event.clientY - startY
                const newLeft = initialLeft + offsetX
                const newTop = initialTop + offsetY
                const newRight = newLeft + dragBox.getBoundingClientRect().width
                const newBottom = newTop + dragBox.getBoundingClientRect().height
                if (
                    newLeft >=
                    parentDom.getBoundingClientRect().left + (this.safeDistance.left || 0) &&
                    newRight <=
                    parentDom.getBoundingClientRect().right - (this.safeDistance.right || 0) &&
                    this.horizontalMove
                ) {
                    dragBox.style.left = `${newLeft - parentDom.getBoundingClientRect().left}px`
                }
                if (
                    newTop >=
                    parentDom.getBoundingClientRect().top + (this.safeDistance.top || 0) &&
                    newBottom <=
                    parentDom.getBoundingClientRect().bottom -
                    (this.safeDistance.bottom || 0) &&
                    this.verticalMove
                ) {
                    dragBox.style.top = `${newTop - parentDom.getBoundingClientRect().top}px`
                }
            }
            const onMouseUp = (_event) => {
                if (this.disableUserSelect) document.body.style.userSelect = this.tempUserSelect
                document.removeEventListener('mousemove', onMouseMove)
            }
        },
        /**
         * 右下角拖拽事件
         */
        resizeXYInit() {
            const dragXYRef = this.$refs.resizeXYRef
            const dragBox = this.$refs.dragBox
            let isResizing = false;
            let prevX = 0;
            let prevY = 0;
            let prevWidth = 0;
            let prevHeight = 0;
            dragXYRef.addEventListener('mousedown', (event) => {
                if (!this.rightBottomLine) return
                if (this.disableUserSelect) {
                    this.tempUserSelect = document.body.style.userSelect
                    document.body.style.userSelect = 'none'
                }
                isResizing = true
                prevX = event.clientX
                prevY = event.clientY
                prevWidth = dragBox.getBoundingClientRect().width
                prevHeight = dragBox.getBoundingClientRect().height
                document.addEventListener('mousemove', onMouseMoveXY)
                document.addEventListener('mouseup', onMouseUpXY, {once: true})
            })
            const onMouseMoveXY = (event) => {
                if (isResizing) {
                    const newWidth = prevWidth + (event.clientX - prevX)
                    const newHeight = prevHeight + (event.clientY - prevY)
                    const width = Math.max(this.minWidth, Math.min(this.maxWidth, newWidth))
                    const height = Math.max(this.minHeight, Math.min(this.maxHeight, newHeight))
                    requestAnimationFrame(() => {
                        this.$emit('update:width', width - 10)
                        this.$emit('update:height', height - 10)
                    })
                }
            }

            const onMouseUpXY = (event) => {
                isResizing = false
                if (this.disableUserSelect) document.body.style.userSelect = this.tempUserSelect
                document.removeEventListener('mousemove', onMouseMoveXY)
            }
        },

        resizeLineInit() {
            const dragBox = this.$refs.dragBox
            this.RESIZE_LINE_ARR.forEach((item) => {
                this.lineInit(this.$refs[item], dragBox, item)
            })
        },

        lineInit(line, dragBox, lineKey) {
            let width, height, left, top
            // 起始位置
            let startCoord = 0
            let isResizing = false
            // 父节点
            const parentDom = this.parentDom
            // 是否操作垂直方向
            const isVertical = [DARG_LINE.T_LINE, DARG_LINE.B_LINE].includes(lineKey)
            line.addEventListener('mousedown', (event) => {
                if (!this[lineKey]) return
                if (this.disableUserSelect) {
                    this.tempUserSelect = document.body.style.userSelect
                    document.body.style.userSelect = 'none'
                }
                isResizing = true
                width = dragBox.getBoundingClientRect().width
                height = dragBox.getBoundingClientRect().height
                if (lineKey === DARG_LINE.T_LINE) startCoord = event.clientY + height
                if (lineKey === DARG_LINE.B_LINE) startCoord = event.clientY - height
                if (lineKey === DARG_LINE.L_LINE) startCoord = event.clientX + width
                if (lineKey === DARG_LINE.R_LINE) startCoord = event.clientX - width
                left =
                    width +
                    dragBox.getBoundingClientRect().left -
                    parentDom.getBoundingClientRect().left
                top =
                    height +
                    dragBox.getBoundingClientRect().top -
                    parentDom.getBoundingClientRect().top
                document.addEventListener('mousemove', onMouseMove)
                document.addEventListener('mouseup', onMouseUp, {once: true})
            })

            const onMouseMove = (event) => {
                if (isResizing) {
                    let curSize
                    // 获取垂直方向或水平方向，最大最小值
                    const sizeLimit = isVertical
                        ? [this.minHeight, this.maxHeight]
                        : [this.minWidth, this.maxWidth]
                    if (lineKey === DARG_LINE.T_LINE) curSize = startCoord - event.clientY
                    if (lineKey === DARG_LINE.B_LINE) curSize = event.clientY - startCoord
                    if (lineKey === DARG_LINE.L_LINE) curSize = startCoord - event.clientX
                    if (lineKey === DARG_LINE.R_LINE) curSize = event.clientX - startCoord
                    if (
                        this.lineEdgeCheck({
                            curSize,
                            sizeLimit,
                            lineKey,
                            parentDom,
                            clientY: event.clientY,
                            clientX: event.clientX,
                        })
                    ) {
                        requestAnimationFrame(() => {
                            if (lineKey === DARG_LINE.R_LINE)
                                this.$emit('update:width', curSize - 10)
                            if (lineKey === DARG_LINE.B_LINE)
                                this.$emit('update:height', curSize - 10)
                            if (lineKey === DARG_LINE.T_LINE) {
                                dragBox.style.top = top - curSize + 'px' // 更新坐标
                                this.$emit('update:height', curSize - 10)
                            }
                            if (lineKey === DARG_LINE.L_LINE) {
                                dragBox.style.left = left - curSize + 'px' // 更新坐标
                                this.$emit('update:width', curSize - 10)
                            }
                        })
                    }
                }
            }

            const onMouseUp = () => {
                isResizing = false
                if (this.disableUserSelect) document.body.style.userSelect = this.tempUserSelect
                document.removeEventListener('mousemove', onMouseMove)
            }
        },

        lineEdgeCheck(obj) {
            // 判断是否超过边界
            let isEdge = false
            const parentDomPosition = obj.parentDom.getBoundingClientRect()
            if (obj.lineKey === DARG_LINE.T_LINE)
                isEdge = obj.clientY >= parentDomPosition.top + (this.safeDistance.top || 0)
            if (obj.lineKey === DARG_LINE.B_LINE)
                isEdge = obj.clientY <= parentDomPosition.bottom - (this.safeDistance.bottom || 0)
            if (obj.lineKey === DARG_LINE.L_LINE)
                isEdge = obj.clientX >= parentDomPosition.left + (this.safeDistance.left || 0)
            if (obj.lineKey === DARG_LINE.R_LINE)
                isEdge = obj.clientX <= parentDomPosition.right - (this.safeDistance.right || 0)
            // 判断是否在最大最小区间中
            const isInRange =
                (obj.sizeLimit[0] ? obj.curSize > obj.sizeLimit[0] : true) &&
                (obj.sizeLimit[1] ? obj.curSize < obj.sizeLimit[1] : true)
            return isInRange && isEdge
        },
    },
}
</script>

<style scoped lang="scss">
$hoverColor: #1d7dfa;
@mixin hoverBorder($property, $direction) {
    &.border#{$direction} {
        &:hover {
            border-#{$property}: 1px dashed $hoverColor;
        }
    }
}

.main {
    position: absolute;
    width: fit-content;
    height: fit-content;

    .g-flex {
        display: flex;
    }

    .resize-xy {
        position: absolute;
        right: 0;
        bottom: 0;
        z-index: 9;
        width: 5px;
        height: 5px;
        cursor: se-resize; //光标样式为东南角调整大小
    }
}

.border-t {
    @include hoverBorder(top, -t);
}

.border-b {
    @include hoverBorder(bottom, -b);
}

.border-l {
    @include hoverBorder(left, -l);
}

.border-r {
    @include hoverBorder(right, -r);
}

.resize-x {
    width: 5px;
    cursor: e-resize;
}

.resize-y {
    height: 5px;
    cursor: s-resize;
}
</style>

使用示例

            <!--            竖表相关-->
            <drag-resize-container
                v-if="pillarDialogConfig.visible"
                :parent-dom="dragParentDom"
                :position-config="{left:'410px',top:0}"
                style="background-color: rgba(232, 235, 244, 0.7);"
                :max-width="900"
                :min-height="300"
                :width.sync="pillarDialogConfig.width"
                :height.sync="pillarDialogConfig.height">
                <template #content>
                    <PillarTable
                        :pillarRebarData="pillarRebarData"
                        :pillarRebarLoading="pillarRebarLoading"
                        :pillarTableTips="pillarTableTips"
                        :pillarTitle="pillarTitle"
                        @editPillarTableValue="editPillarTableValue"
                        @closePillarTable="pillarDialogConfig.visible = false"
                    ></PillarTable>
                </template>
            </drag-resize-container>
Vue3 - Element Plus 菜单侧边栏可拖动调整左右两侧宽度，el-menu菜单组件拖拽中间的分隔栏可调整布局宽度，后台管理系统左侧导航栏可拖曳自由调整大小（Menu菜单拖拽条，详细代码）
资深程序员
04-03 6105
vue3，element-plus，el-menu，Menu菜单，Vue3+Element拖动侧边栏以便自由调整左右两侧的宽度，el-menu侧边栏可拖拽，右侧区域可自适应宽度，el-menu可拖拽侧边栏实现，菜单栏可以拖动改变宽度，vue3实现左侧导航菜单可拖拽改变左侧导航宽度，vue3中实现拖动调整左右两侧div的宽度(左右拖拽)，菜单可左右拖曳调整，vue3修改侧边导航栏宽度方法，vue3动态修改侧边菜单栏宽度，实现鼠标左右拖拽移动，去除滚动条，element拖动侧边栏以便自由调整左右两侧的宽度，vu
鸿蒙5.0版开发：ArkTS组件-拖拽事件
m0_69424697的博客
10-17 1053
拖拽事件指组件被长按后拖拽时触发的事件。
一个FORM容器类控件，有源码，可拖拽、可伸缩，方便桌面程序开发
09-30
一个FORM容器类控件，有源码，可拖拽、可伸缩，方便桌面程序开发
vue3 基于element-plus进行的一个可拖动改变导航与内容区域大小的简单方法
最新发布
花花鱼的专栏
11-07 2076
通过拖动中间的resize，动态的改变left与mid(right)区域的宽度，来达到拖动改变区域大小的目的。
封装左侧抽屉可拖拽组件【可多个】
在路上`的博客
09-24 330
抽屉组件封装
自定义可拖拽的容器LinearLayout2
K1585853768的专栏
11-26 1171
之前的一篇文章“自定义可拖拽的LinearLayout”是监听手势事件，使用layout(),改变整个容器的内容， 但是想了想，改变整个容器的位置不太好，所以今天使用scrollTo,scroBy,通过改变容器里的内容的位置来实现拖拽。 下面附上代码 一.重写onTouchEvent函数，其实就是将上篇的layout(getLeft()+dx,getTop()+dy,getRight()
js容器内拖拽
02-08
最近项目要求托拽功能的日历模块，我那个愁啊，以前做项目就是简单的常规的内容，那接触过如此“高深”的部分啊，在网上搜到了http://www.cnblogs.com/ljchow/archive/2010/04/27/1721695.html这篇文章，实在太感谢作者了，帮了我这个菜菜鸟的大忙啊。 在此基础上我添加了对象在容器间的托拽，这是为了日历日报托拽的试验品，主要是为了完成功能，在很多方面很不成熟，后期，我加了托拽误差范围设定（就是手抖了一下下不算托拽），容器内容整体托拽等等。 代码默认的是复制托拽，怎么单纯托拽的设定，请看以上文章的设定。 至于理解也请对比文章，我实在太懒了，哈哈哈哈。
VUE实现可随意拖动的弹窗组件
10-17
在Vue.js中实现一个可随意拖动的弹窗组件，主要涉及到事件监听、CSS样式以及组件的状态管理。这个组件主要用于解决在PC端使用时，没有现成的可拖动弹窗功能的问题。以下是对实现该功能的关键知识点的详细说明： 1. ...
react-reactdnr采用Reactjs构建的可拖动和可调整大小的窗口
08-15
总结来说，react-dnr是一个专为React.js设计的实用组件，它实现了拖放和窗口大小调整功能，简化了这类交互式UI元素的开发流程。通过其灵活的API和定制性，开发者可以快速构建出具有桌面应用体验的现代Web应用。
自定义组件实现Label位置大小可拖动调整
构建一个可拖动改变位置和大小的Label组件需要深入理解Flex框架的事件处理机制、布局管理以及组件封装技术。本知识点涉及到的技术点广泛，涵盖了组件设计、事件处理、布局调整以及代码测试等多个方面。通过博文链接...
WPF可移动和可调整大小的面板容器自定义控件实现
创建一个可在Canvas上移动和调整大小的WPF自定义面板容器控件是一个涉及多个技术点的复杂过程。它要求开发者熟练掌握WPF的事件处理机制、样式和模板的应用、变换的应用以及布局容器的使用。通过上述分析，我们可以...
自定义可拖拽的父容器
lk_0x00的博客
10-14 303
/** * 可拖拽的父容器Layout，只需要将内容图片在xml布局文件中设置在父容器内即可 * 1.主要利用ViewDragHelper这个类来实现拖拽 * Created by CaiXi on 2016/8/23. */ public class DragLayout extends RelativeLayout{ private ViewDragHelper mDragge
如何实现一个自由拖拽的组件
油墨香^-^的博客
02-20 394
大家好，在前两篇文章中，我们走进了前端低代码的世界，并揭秘了低代码的核心——页面设计器的实现。在揭秘页面设计器时，我们重点分享了顺序排列布局的组件拖动方式，那篇文章[2]的评论中，有小伙伴问到自由布局的实现，那么我们在这篇文章中来分享一下自由布局拖动的实现原理，实现一个设计器组件自由拖动的最简demo。
vue2 draggable拖拽组件的使用及注意事项
MyOxygen的博客
06-20 7422
可以看到页面上，新拖拽的三个组件显示的orderId是一样的，后来发现造成这个错误是因为，在右边容器添加组件，取该组件的属性时使用的是简单赋值，在拖拽新的组件时，修改了同组件的属性值。在这里，左边的容器拖出时是clone模式，连续拖拽同一个到右边容器时，控制台提示报错，并且组件展示的内容都一样，组件的属性值也被修改成相同的值。需要设置拖拽容器的高度，否则，当容器内没有小块时，高度为0，再想拖拽小块进入该容器就拖不进去了。记录draggable拖拽组件的使用方法以及遇到的问题。拖拽时的动画时间，单位:ms。
鸿蒙5.0版开发：ArkTS高级组件-@ohos.arkui.advanced.GridObjectSortComponent (网格对象的编辑排序)
m0_69424697的博客
10-10 1044
网格对象的编辑排序是用于网格对象的编辑、拖动排序、新增和删除。
如何实现element-plus中的 el-container布局可拖动
天落秋雨的专栏
06-02 1949
通过增加横向拖动条与纵向拖动条实现 el-aside 与 el-header可拖动。
vue 限制在指定容器内可拖拽的div
朝阳39的博客
12-06 1131
/ 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置。// 在容器范围内移动时，被拖拽元素的最大left值。// 在容器范围内移动时，被拖拽元素的最小left值。// 在容器范围内移动时，被拖拽元素的最大left值。// 在容器范围内移动时，被拖拽元素的最小left值。// 按下鼠标时，鼠标相对于被拖拽元素的坐标。//此处+1为容器的边框1px。//此处+1为容器的边框1px。// 获取容器dom。
基于el-drawer组件封装拖拽、缩放功能
辞忧*的博客
07-21 907
页面内容展示
【前端开发】Vue / Uniapp 框架的可拖拽浮窗封装组件
`雾博客
04-25 1160
【代码】【前端开发】可拖拽浮窗组件。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值