资讯专栏INFORMATION COLUMN

vue-draggable-resizable 可拖拽缩放的组件

springDevBird / 718人阅读

摘要:类似于吸附效果代码修改组件之间的冲突检测首先是组件之间的冲突检测,组件与组件的边界检测需要一个标记进行判断。是否开启元素对齐当调用对齐时,用来设置组件与组件之间的对齐距离,以像素为单位。如果发现什么或者可以将代码优化的地方请劳烦告知我。

Vue 用于可调整大小和可拖动元素的组件并支持组件之间的冲突检测与组件对齐
更新2.0版本
说明:组件基于vue-draggable-resizable进行二次开发

距离上1.7版本版本的修改已经过去快一年的时间了,原版组件在之前已经更新到了2.0版本。

虽然之前适配过旧版组件,但是因为2.0版本原作者对代码进行了重构,原来修改的代码照搬是不可能的了。

所以也就一直没有将冲突检测以及吸附对齐功能适配到2.0版本,最近正好有时间就适配一下。

新增特征

冲突检测

吸附对齐

默认样式优化

功能预览

项目地址

https://github.com/gorkys/vue...

如果喜欢该项目,欢迎Star
前言
17年就应用此组件到了项目中,当时正式版的功能不能满足项目需求,还拉取了dev分支的测试版进行了简单的更改。(项目中主要功能之一需要用到此组件)
今年因为需求变更,项目重构(手动泪奔),然后去看了看github,该组件的正式版本更新到了1.7.x,于是把正式版拉下来根据自己的需求进行了修改并发布新版到npm上。
特征

没有依赖

可拖动,可调整大小或者两者都行

拥有用于调整大小的控制点

限制组件调整大小和移动超出父元素

自定义网格移动

将拖动限制为垂直或水平移动

新增特征

组件之间的冲突检测(不允许组件之间重叠)

组件与组件之间进行对齐(类似于吸附效果)

项目地址

原组件地址:vue-draggable-resizable
新组件地址:vue-draggable-resizable

安装使用
npm install --save vue-draggable-resizable-gorkys

更多API请在项目说明文档中查看

Demo

Demo

修改过程记录 提出建议

在原组件的Issues中提出了建议,作者表示不打算让此组件进行跨越组件之外的操作。
好吧,既然作者不打算进行这方面的支持,那只好自己动手了。
Clone项目

Fork项目到自己的仓库,然后Clone项目到本地进行修改。

需求说明

1.组件之间的冲突检测

两个组件不允许重叠,如果重叠,将回到移动或缩放前位置

2.组件与组件之间进行对齐(参照Jquery UI的draggable

用户移动一个组件到另一个组件边缘的时候,进行对齐操作。类似于吸附效果
代码修改 1.组件之间的冲突检测

首先是组件之间的冲突检测,组件与组件的边界检测需要一个标记进行判断。

先在props中加入一个isConflictCheck,让使用者自己选择是否使用此功能。
props:{
    /* 定义组件是否开启冲突检测 */
    isConflictCheck: {
      type: Boolean, default: false
    }
    ...
}
当我们拿到isConflictCheck后,在setConflictCheck方法中给组件的Dom设置一个data-*的属性。
   setConflictCheck: function () {
      if (this.isConflictCheck) {
        this.$el.setAttribute("data-is-check", "true")
      } else {
        this.$el.setAttribute("data-is-check", "false")
      }
    }
然后就是如何去检测组件之间的冲突,代码如下,此代码是在测试版本中使用的,看到这些判断都可怕,为了头发,就没有去优化了(反正能使用)。
conflictCheck: function () {
      if (this.isConflictCheck) {
        let p = this.$el.parentNode.childNodes // 获取当前父节点下所有子节点
        if (p.length > 1) {
          for (let i = 0; i < p.length; i++) {
            if (p[i] !== this.$el && p[i].className !== undefined && p[i].getAttribute("data-is-check") !== "false") {
              let tw = p[i].offsetWidth
              let th = p[i].offsetHeight
              let tl = p[i].offsetLeft
              let tt = p[i].offsetTop
              // 如果冲突,就将回退到移动前的位置
              if (this.top >= tt && this.left >= tl && tt + th > this.top && tl + tw > this.left ||
                this.top <= tt && this.left < tl && this.top + this.height > tt && this.left + this.width > tl) { /* 左上角与右下角重叠 */
                this.top = this.restoreY
                this.left = this.restoreX
                this.width = this.restoreW
                this.height = this.restoreH
              } else if (this.left <= tl && this.top >= tt && this.left + this.width > tl && this.top < tt + th ||
                this.top < tt && this.left > tl && this.top + this.height > tt && this.left < tl + tw) { /* 右上角与左下角重叠 */
                this.top = this.restoreY
                this.left = this.restoreX
                this.width = this.restoreW
                this.height = this.restoreH
              } else if (this.top < tt && this.left <= tl && this.top + this.height > tt && this.left + this.width > tl ||
                this.top > tt && this.left >= tl && this.top < tt + th && this.left < tl + tw) { /* 下边与上边重叠 */
                this.top = this.restoreY
                this.left = this.restoreX
                this.width = this.restoreW
                this.height = this.restoreH
              } else if (this.top <= tt && this.left >= tl && this.top + this.height > tt && this.left < tl + tw ||
                this.top >= tt && this.left <= tl && this.top < tt + th && this.left > tl + tw) { /* 上边与下边重叠(宽度不一样) */
                this.top = this.restoreY
                this.left = this.restoreX
                this.width = this.restoreW
                this.height = this.restoreH
              } else if (this.left >= tl && this.top >= tt && this.left < tl + tw && this.top < tt + th ||
                this.top > tt && this.left <= tl && this.left + this.width > tl && this.top < tt + th) { /* 左边与右边重叠 */
                this.top = this.restoreY
                this.left = this.restoreX
                this.width = this.restoreW
                this.height = this.restoreH
              } else if (this.top <= tt && this.left >= tl && this.top + this.height > tt && this.left < tl + tw ||
                this.top >= tt && this.left <= tl && this.top < tt + th && this.left + this.width > tl) { /* 左边与右边重叠(高度不一样) */
                this.top = this.restoreY
                this.left = this.restoreX
                this.width = this.restoreW
                this.height = this.restoreH
              }
            }
          }
        }
      }
    }, // 冲突检测
最后就是在停止移动和缩放时调用上面的方法就可以了(代码精简过)。
handleUp: function (e) {
      this.handle = null
      if (this.resizing) {
        this.resizing = false
        this.conflictCheck() // 冲突检测
      }
      if (this.dragging) {
        this.dragging = false
        this.conflictCheck() // 冲突检测
      }
    } // 鼠标松开
2.组件与组件之间进行对齐

与冲突检测一样的套路。

先在props中加入一个snap,让使用者自己选择是否使用此功能。为了更灵活,这里多添加了一个snapTolerance,当调用对齐时,用来设置组件与组件之间的对齐距离,以像素为单位。
    /* 是否开启元素对齐 */
    snap: {
      type: Boolean, default: false
    },
    /* 当调用对齐时,用来设置组件与组件之间的对齐距离,以像素为单位。 */
    snapTolerance: {
      type: Number,
      default: 5,
      validator: function (val) {
        return typeof val === "number"
      }
然后就是设置data-*属性
setSnap: function () {
      if (this.snap) {
        this.$el.setAttribute("data-is-snap", "true")
      } else {
        this.$el.setAttribute("data-is-snap", "false")
      }
    }, // 设置对齐元素
再然后就是主要方法snapCheck的编写。这里我翻看了一下JQuery UI中的draggable源码,并近乎copy的借鉴了过来。
snapCheck: function () {
      if (this.snap) {
        let p = this.$el.parentNode.childNodes // 获取当前父节点下所有子节点
        if (p.length > 1) {
          let x1 = this.left
          let x2 = this.left + this.width
          let y1 = this.top
          let y2 = this.top + this.height
          for (let i = 0; i < p.length; i++) {
            if (p[i] !== this.$el && p[i].className !== undefined && p[i].getAttribute("data-is-snap") !== "false") {
              let l = p[i].offsetLeft // 对齐目标的left
              let r = l + p[i].offsetWidth // 对齐目标右侧距离窗口的left
              let t = p[i].offsetTop// 对齐目标的top
              let b = t + p[i].offsetHeight // 对齐目标右侧距离窗口的top

              let ts = Math.abs(t - y2) <= this.snapTolerance
              let bs = Math.abs(b - y1) <= this.snapTolerance
              let ls = Math.abs(l - x2) <= this.snapTolerance
              let rs = Math.abs(r - x1) <= this.snapTolerance
              if (ts) {
                this.top = t - this.height
              }
              if (bs) {
                this.top = b
              }
              if (ls) {
                this.left = l - this.width
              }
              if (rs) {
                this.left = r
              }
            }
          }
        }
      }
    }, // 检测对齐元素
好了,最后就是在鼠标移动组件时及时调用就可以了。
handleMove: function (e) {
        ...
        this.snapCheck()
        this.$emit("dragging", this.left, this.top)
      }
    }, // 鼠标移动
总结

这次的修改还算是非常顺利,顺便还把之前的一些代码进行了优化。
如果发现什么bug或者可以将代码优化的地方请劳烦告知我

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/97874.html

相关文章

  • 使用 Drag and Drop 给Web应用提升交互体验

    摘要:注意点在鼠标操作拖放期间,有一些事件可能触发多次,比如和。可拖拽元素,建议使用,设定可拖拽元素的鼠标游标,提升交互。在中使用拖拽中使用可以直接绑定到组件上。 什么是 Drag and Drop (拖放)? 简单来说,HTML5 提供了 Drag and Drop API,允许用户用鼠标选中一个可拖动元素,移动鼠标拖放到一个可放置到元素的过程。 我相信每个人都或多或少接触过拖放,比如浏览...

    legendmohe 评论0 收藏0
  • 前方来报,八月最新资讯--关于vue2&3最佳文章推荐

    摘要:哪吒别人的看法都是狗屁,你是谁只有你自己说了才算,这是爹教我的道理。哪吒去他个鸟命我命由我,不由天是魔是仙,我自己决定哪吒白白搭上一条人命,你傻不傻敖丙不傻谁和你做朋友太乙真人人是否能够改变命运,我不晓得。我只晓得,不认命是哪吒的命。 showImg(https://segmentfault.com/img/bVbwiGL?w=900&h=378); 出处 查看github最新的Vue...

    izhuhaodev 评论0 收藏0
  • element-ui dialog组件添加拖拽位置 拖拽宽高

    摘要:最近公司新加需求实现弹窗可拖拽还要拖拽宽高变化国际惯例先上图浏览器下作的有几个点需要注意一下每个弹窗都要有唯一可操作指令可以做到拖拽时要添加可拖拽区块由于组件在设计时宽度用了百分比这里不同浏览器有兼容性问题实现拖拽宽高时获取边缘问题定位设 最近公司新加需求, 实现弹窗可拖拽, 还要拖拽宽高变化. 国际惯例先上图: edge浏览器下作的gif http://www.lano...

    jzman 评论0 收藏0
  • Canvas裁剪图片(截选框拖拽

    摘要:利用实现图片裁剪效果图实现思路打开图片并将图片绘制到中利用的函数来裁剪图片将转化为即可。巨坑转化为图片确认截图确认截图参考文章我是,年轻的前端攻城狮一枚,爱专研,爱技术,爱分享。文章有任何问题欢迎大家指出,也欢迎大家一起交流前端各种问题 利用Canvas实现图片裁剪 效果图 showImg(https://segmentfault.com/img/bVburJ2?w=864&h=706...

    MAX_zuo 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<