实现一个可拖拽的宫格

2021-11-05 969 阅读1分钟

最近在接触拖拽，用了不少库。比如vue的Vue.Draggable、React的 clauderic/react-sortable-hoc 和 react-beautiful-dnd 等等。这里就会想去自己去实现一个拖拽。还是基于H5 的拖拽。推荐MDN关于拖拽的描述MDN拖拽，记录一下自己的基于Vue的拖拽实现。

拖拽动画.gif demo地址

其实需要关注两个问题基本就可以完成简单的demo（基于vue）思路就是改变数组里面元素位置来进行动态渲染。

拖拽时候能够记住当前拖动的元素下标
获取到拖拽放入的元素的下标对，这两步骤完成基本就可以，然后我们就可以对两个元素的下标进行调换，Vue是响应式的，就会产生替换。

利用dataTransfer放入拖拽元素的下标。`DataTransfer` 对象用于保存拖动并放下（drag and drop）过程中的数据。它可以保存一项或多项数据，这些数据项可以是一种或者多种数据类型。简单来说就是拖拽提供对象供你存放拖拽时候需要携带的数据。

@dragstart="itemDragStart($event, index)"

itemDragStart(ev, index) {
      // 将当前的itemIndex 放到拖拽里
   ev.dataTransfer.setData('itemIndex', index)
},

拖拽Drop时候会暴露出很多信息，比如当前丢放的元素。比如下面target其实就是你丢放的那个元素。这个时候。拿到这个数组下标进行替换就可以了。拿到这个元素，我把下标放入了该元素自定义属性对象Dataset里面。这样就可以直接取了，并且列表改变时候Vue也会直接更新。

fatherDrop(ev) {
    ev.preventDefault()
    const data = +ev.dataTransfer.getData('itemIndex')
    if (data !== undefined && !isNaN(ev.target.dataset.index)) {
        this.change(this.list, data, +ev.target.dataset.index)
        ev.dataTransfer.clearData()
    }
}

然后就简单实现了一个列表拖拽。