vue拖拽组件-轻松教你搞定组件的拖拽, 缩放, 多控制点伸缩和拖拽数据上报

vue拖拽组件_vue 可视化拖拽布局_vue 鼠标拖拽事件

最近笔者专注于研究可视化搭建平台的解决方案, 分析了很多拖拽组件和页面动态化技术, 也在H5-Dooring项目中做了很多技术实现, 包括:

还有很多技术细节这里不一一举例了, 最近在研究自由布局时发现有这样一个需求, 我们可以自由拖拽和缩放组件, 并能从组件的不同纬度拖拽, 如下图所示:

由于我们的技术栈采用的是React, 目前还没有一个成熟库可以同时支持自由拖拽和缩放, 我们不得不用react-dragable和react-resiable两个库来实现拖拽和缩放, 但是这样我们要维护的数据结构就相当复杂了(当然vue生态有成熟的vue-dragable等来支持自由拖拽和缩放), 所以最后笔者决定自己来实现一个.

我们从可视化搭建平台的实际业务出发, 可以分析出拖拽缩放有如下几个功能点:

实现以上四点我们就可以实现一个可用的拖拽缩放组件. 接下来笔者就来介绍一下实现的开源拖拽缩放组件rc-drag.

实现自由拖拽

rc-drag未压缩的体积只有20多k, 去除注释核心代码不到200行, 可以说是一个非常轻量的拖拽缩放组件库了, 我们要想让自己的组件能自由拖拽, 只需要使用如下方式:

安装

npm i @alex_xu/rc-drag
# 或
yarn add @alex_xu/rc-drag

基本使用

<div id="box" style={{position: 'relative', width: '500px', height: '260px'}}>
  <Drag container="#box" size={[200, 200]}>
    <p>Mr xu</p>
  </Drag>
</div>

我们只需要以上几行代码就能实现组件的自由拖拽. 效果如下:

vue 可视化拖拽布局_vue 鼠标拖拽事件_vue拖拽组件

解决可视化搭建平台页面层级的问题

目前在h5-dooring是通过横向扩展来解决组件层级和嵌套的问题, 如果我们采用自由拖拽布局, 层级和嵌套的问题就很好解决了. 在@alex_xu/rc-drag这个库中笔者实现设置层级的功能, 所以我们可以通过给拖拽组件设置不同的层级, 来实现页面元素叠加和层的概念. 如下设置:

<Drag container="#box" size={[10, 50]} zIndex={10}>
  <p>Mr xu</p>
</Drag>

vue 鼠标拖拽事件_vue 可视化拖拽布局_vue拖拽组件

我们通过给组件设置更高的层级来实现组件堆叠的效果.

实现组件静态化

我们往往会在编辑页面时对组件进行拖拽等操作, 但是有些场景我们需要让组件固定, 比如头部或者页脚, 或者锁定某个元素, 类似于PS里图层锁定. 另一个场景是我们要实现公共的页面渲染器, 在编辑状态下可以自由拖动缩放, 但是在预览状态下需要让元素固定, 不能出现自有拖拽等功能, 类似h5-dooring那种模式, 这个时候我们需要让拖拽组件@alex_xu/rc-drag支持静态化. 这个时候我们可以设置isStatic属性为true, 如下图:

vue拖拽组件_vue 可视化拖拽布局_vue 鼠标拖拽事件

代码如下:

<Drag container="#box" isStatic={true}><p>static item</p></Drag>

我们可以利用这个属性, 写个页面渲染器, 用户在预览时将组件的isStatic设置为true即可, 源码的底层实现其实也很简单, 就是利用react-hoooks的组件编写方式写个判断即可:

{
   isStatic ? 
      <div className="x-drag-item" style={style}>{ children }</div>
      :
      <div 
        className="x-drag-item" 
        style={style} 
        onMouseDown={(e) => onMouseDown('move', e)} 
        onMouseUp={onMouseUp} onMouseMove={onMouseMove}
      >
      </div>
}

实现组件数据上报

我们都知道组件单纯只有拖拽缩放能力远远不能满足业务需求, 对于可视化拖拽组件, 更重要的是要能保留拖拽后的数据, 比如宽高,位置,层级等数据, 所以我们需要监控几个事件, 并将数据传给对应的事件来让外层能监听和获取. 这里笔者提供了两个拖拽回传方法:

后面根据实际情况可以对应添加. 我们可以在父组件中绑定对应的方法, 如下:

<Drag 
  container="#box" 
  size={[200, 200]} 
  zIndex={2} 
  onDragStart={(item) => console.log('start', item)} 
  onDragStop={(item) => console.log('stop', item)}
>
  <p>Mr xu</p>
</Drag>