拖拽

可在移动端和pc端使用的拖拽组件，分为两个组件：Draggable和Droppable。

Draggable：表示一个可拖动元素。
Droppable：表示一个可放置拖动元素的区域。

为适应各种使用场景：

Draggable可以配置其拖拽类型type。
Droppable可配置允许拖拽的类型acceptDragType。
Droppalbe只接受type在其acceptDragType中的Draggalbe。

安装

INFO

如果还需要使用其他组件，请参考全量组件安装

如果仅需要使用当前组件，执行以下命令单独安装:

npmyarnpnpm

shell

npm install @havue/drag-and-drop --save

shell

yarn add @havue/drag-and-drop

shell

pnpm install @havue/drag-and-drop

引入

vue

<script>
import { HvDraggable, HvDroppable } from 'havue'
// or 
import { HvDraggable, HvDroppable } from '@havue/components'
// or
import { HvDraggable, HvDroppable } from '@havue/drag-and-drop'
</script>

示例

左侧标签块为Draggalbe元素，文本显示其类型和大小。
灰色Draggalbe元素设置了immediate="right",可向右立即拖动。
右侧有两个Droppable区域
- green标签块只能拖放到green区域
- yellow标签块只能拖放到yellow区域

下列卡片可拖动：

yellow: 173 * 67
immediate: right

yellow: 179 * 59

yellow: 177 * 74
immediate: right

green: 190 * 83

green: 164 * 85
immediate: right

green: 158 * 97

green: 166 * 73
immediate: right

green: 188 * 85

yellow: 193 * 74
immediate: right

green: 176 * 59

green: 170 * 86
immediate: right

green: 172 * 91

yellow: 193 * 63
immediate: right

yellow: 189 * 84

green: 164 * 53
immediate: right

yellow: 171 * 84

yellow: 163 * 94
immediate: right

green: 174 * 71

yellow: 183 * 75
immediate: right

yellow: 165 * 51

yellow: 173 * 66
immediate: right

green: 180 * 64

green: 156 * 53
immediate: right

green: 186 * 76

yellow: 181 * 97
immediate: right

yellow: 151 * 57

yellow: 195 * 91
immediate: right

green: 192 * 73

yellow: 151 * 68
immediate: right

yellow: 185 * 57

yellow: 151 * 85
immediate: right

yellow: 165 * 77

green: 168 * 91
immediate: right

yellow: 177 * 50

green: 162 * 72
immediate: right

yellow: 179 * 92

green: 198 * 88
immediate: right

green: 184 * 96

green: 164 * 61
immediate: right

yellow: 195 * 77

下方为可拖放区域green：

下方为可拖放区域yellow：

点我看代码

templatescriptstyle

vue

<template>
  <div class="dnd-demo" ref="divRef">
    <div class="left-box">
      <p>下列卡片可拖动：</p>
      <div class="top-drag-list-box">
        <Draggable :type="item.type" v-for="(item, i) in DragItems" :data="item" :key="i" :immediate="item.immediate">
          <div class="drag-box" :style="item.style">
            {{ item.type }}: {{ `${item.width} * ${item.height}` }}
            <br />
            {{ item.immediate ? 'immediate: ' + item.immediate : '' }}
          </div>
        </Draggable>
      </div>
    </div>

    <div class="right-box">
      <p>下方为可拖放区域green：</p>
      <Droppable
        accept-drag-type="green"
        @enter="
          (type: DragAndDropDragType, point: DragAndDropPoint, data: any) => {
            enteredType = 'green'
            onEnter(type, point, data)
          }
        "
        @move="onMove"
        @leave="onLeave"
        @drop="onDrop"
      >
        <div class="drop-box">
          <div class="preview-box" v-if="enteredType === 'green'" :style="previewStyle"></div>
          <div
            class="inner-box-item"
            v-for="item in greenInnerBoxList"
            :key="item.key"
            :style="{
              top: item.y,
              left: item.x,
              width: item.width,
              height: item.height
            }"
          ></div>
        </div>
      </Droppable>

      <p>下方为可拖放区域yellow：</p>
      <Droppable
        accept-drag-type="yellow"
        @enter="
          (type: DragAndDropDragType, point: DragAndDropPoint, data: any) => {
            enteredType = 'yellow'
            onEnter(type, point, data)
          }
        "
        @move="onMove"
        @leave="onLeave"
        @drop="onDrop"
      >
        <div class="drop-box yellow">
          <div class="preview-box" v-if="enteredType === 'yellow'" :style="previewStyle"></div>
          <div
            class="inner-box-item"
            v-for="item in yellowInnerBoxList"
            :key="item.key"
            :style="{
              top: item.y,
              left: item.x,
              width: item.width,
              height: item.height
            }"
          ></div>
        </div>
      </Droppable>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { DragAndDropPoint, DragAndDropDragType } from '@havue/drag-and-drop'
import { computed, ref, reactive } from 'vue'
// import { HvDraggable as Draggable, HvDroppable as Droppable } from '@havue/drag-and-drop'
import { HvDraggable as Draggable, HvDroppable as Droppable } from '@havue/components'

type BoxType = {
  key: string | number | symbol
  x: string
  y: string
  width: string
  height: string
}

type EnteredType = 'green' | 'yellow' | ''

const divRef = ref<HTMLElement>()

const enteredType = ref<EnteredType>('')
const enteredPoint = ref({
  x: 0,
  y: 0
})
const previewData = ref()

const DragItems = reactive(
  Array(40)
    .fill(0)
    .map((_, i) => {
      let random1 = Math.round(Math.random() * 50)
      let random2 = Math.round(Math.random() * 50)
      return {
        type: random1 % 2 === 0 ? 'green' : 'yellow',
        width: random1 + 150,
        height: random2 + 50,
        immediate: i % 2 == 0 ? ('right' as const) : undefined,
        style: {
          background: i % 2 == 0 ? 'gray' : ''
        }
      }
    })
)

const greenInnerBoxList = reactive<BoxType[]>([
  {
    key: 1,
    x: '20px',
    y: '20px',
    width: '20px',
    height: '20px'
  },
  {
    key: 2,
    x: '100px',
    y: '30px',
    width: '50px',
    height: '200px'
  },
  {
    key: 3,
    x: '200px',
    y: '40px',
    width: '90px',
    height: '40px'
  }
])

const yellowInnerBoxList = reactive<BoxType[]>([
  {
    key: 4,
    x: '200px',
    y: '40px',
    width: '90px',
    height: '40px'
  }
])

const previewStyle = computed(() => {
  const preview = previewData.value || {}
  return {
    top: `${enteredPoint.value.y}px`,
    left: `${enteredPoint.value.x}px`,
    width: `${preview.width || 100}px`,
    height: `${preview.height || 50}px`
  }
})

function onEnter(type: DragAndDropDragType, point: DragAndDropPoint, data: any) {
  enteredPoint.value = point
  previewData.value = data
}

function onMove(type: DragAndDropDragType, point: DragAndDropPoint, data: any) {
  enteredPoint.value = point
  previewData.value = data
}

function onLeave() {
  enteredType.value = ''
  enteredPoint.value = { x: 0, y: 0 }
  previewData.value = undefined
}

function onDrop(type: DragAndDropDragType, point: DragAndDropPoint, data: any) {
  data = data || {}
  const { width = 100, height = 50 } = data
  if (enteredType.value === 'green') {
    greenInnerBoxList.push({
      key: Date.now(),
      x: `${point.x - width / 2}px`,
      y: `${point.y - height / 2}px`,
      width: `${width}px`,
      height: `${height}px`
    })
  } else if (enteredType.value === 'yellow') {
    yellowInnerBoxList.push({
      key: Date.now(),
      x: `${point.x - width / 2}px`,
      y: `${point.y - height / 2}px`,
      width: `${width}px`,
      height: `${height}px`
    })
  }
  enteredType.value = ''
  enteredPoint.value = { x: 0, y: 0 }
  previewData.value = undefined
}
</script>

scss

<style lang="scss" scoped>
.dnd-demo {
  display: flex;
  width: 100%;
  height: 700px;
  overflow: auto;
  background-color: rgb(20 177 177 / 41.6%);

  p {
    margin: 5px;
  }

  .left-box {
    width: 30%;
    height: 100%;
    margin-right: 15px;
    overflow: auto;
    background-color: rgb(162 101 22 / 69.4%);

    .top-drag-list-box {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      justify-content: flex-start;
      padding: 10px;

      .drag-box {
        width: 130px;
        height: 50px;
        color: white;
        user-select: none;
        background-color: black;
      }
    }
  }

  .right-box {
    flex: 1;

    .drop-box {
      position: relative;
      width: 400px;
      height: 300px;
      overflow: hidden;
      background-color: rgb(11 104 28);

      &.yellow {
        background-color: rgb(188 149 21);
      }

      .preview-box {
        position: absolute;
        background-color: rgb(127 255 212 / 30%);
        transform: translate(-50%, -50%);
      }

      .inner-box-item {
        position: absolute;
        background-color: rgb(143 10 65 / 46.6%);
      }
    }
  }
}
</style>

Draggable 属性

属性名	说明	类型	默认值
type	拖拽元素类型	`DragAndDropDragType`	-
immediate?	拖拽元素立即响应拖动的方向，默认需要长按拖动	`ImmediateType \| ImmediateType[]`	-
disabled?	是否禁用	`boolean`	-
data?	拖拽元素相关数据，供Droppable使用	`any`	-

type DragAndDropDragType: string | number | symbol

type ImmediateType = 'left' | 'right' | 'top' | 'bottom' | 'all' | undefined

Draggable 插槽

名称	说明
default	默认内容
drag-item	拖动展示元素

Droppable 属性

属性名	说明	类型	默认值
acceptDragType	可接受拖拽元素类型	`DragAndDropDragType \| Array<DragAndDropDragType>`	-

Droppable 事件

事件	说明	参数类型
enter	Draggable进入时触发	`(type: DragType, point: DragAndDropPoint, data: any) => void`
move	Draggable在区域内拖动时触发	`(type: DragType, point: DragAndDropPoint, data: any) => void`
drop	Draggable放下时触发	`(type: DragType, point: DragAndDropPoint, data: any) => void`
leave	Draggable离开时触发	`(type: DragType, data: any) => void`

DragAndDropPoint: {
  /** 在Droppable中的横坐标 */
  x: string
  /** 在Droppable中的纵坐标 */
  y: string
}

Droppable 插槽

名称	说明
default	默认内容

拖拽 ​

安装 ​

引入 ​

示例 ​

Draggable 属性 ​

Draggable 插槽 ​

Droppable 属性 ​

Droppable 事件 ​

Droppable 插槽 ​

拖拽

安装

引入

示例

Draggable 属性

Draggable 插槽

Droppable 属性

Droppable 事件

Droppable 插槽