vue3+ts 原生 js drag drop 实现

vue3+ts 原生 js drag drop 实现

一直以来没有涉及的一个领域就是 drag drop 拖动操作,研究了下,实现了,所以写个教程。

官方说明页面及实例:https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API

最终效果:

一、拖动的 html 结构

比如我要将右侧的元素拖动到左边,这里 html 有几个组成部分。

  1. 左边绿色的 .target 目标
  2. 右侧蓝色的 .source 源
  3. 右侧内部的 .source-item 待拖动元素

二、标记元素可被拖动

要想拖动某个元素,需要标记这个元素为可拖动元素,如果不标记,在拖动 某个元素的时候,鼠标上并不会实时跟随被拖动的元素到鼠标指针下。

要想实现这样,只需要添加 draggable 属性即可,这个例子里,上面的多个 .source-item 为需要被拖动的元素。

html 复制代码
<div class="source-item" draggable="true"></div>                 

三、最终要实现的结果

这个例子里,我定义了两个数组,一个源数组,一个目标数组。

ts 复制代码
const sourceArray = ref<Array<number>>([1,2,3,4,5,6])
const targetArray = ref<Array<number>>([])

拖动要实现的功能是,拖动时,将元素从 源数组 中移动到 目标数组 中。

四、拖动过程、对应的事件

这个过程中被拖动元素释放区域 都需要绑定相应的事件,才能完成整个拖动过程。整个过程需要完成好多个事件的响应。

拖动事件是这样进行的:

  1. 拖动元素,(给事件添加绑定这个拖动行为的数据)
  2. 拖到目标区域上方,释放。(获取当前拖动事件的数据,进行下一步操作)

1. 被拖动元素需要响应的事件

被拖动元素需要响应的事件有:

  • ondragstart 拖动开始,在元素被拖动时触发。在这个事件里添加当前对应拖动行为的数据,比如被拖动元素的 Index 等需要的数据
  • ondragend 拖动结束,在元素被释放时触发。这个是取消拖动的操作,本例不作操作。

本例中我在被拖动元素中添加了 data="数据" 的属性,这个在 ondragstart 的时候取用里面的数据,并设置到 .dataTransfer 中。

被拖动元素和最终释放到的元素之间是通过这个 event.dataTransfer 传递数据的。

html 复制代码
<div class="source-item"
     :data="item"
     :ondragstart="dragstart"
     :ondragend="dragend"
     draggable="true"
     v-for="item in sourceArray" :key="item">
    <span>item-{{item}}</span>
</div>
js 复制代码
/**
 * Drag Item
 */
function dragstart(event: DragEvent){
    let data = (event.target as HTMLElement).getAttribute('data') as string  // 获取 html 里的 data 属性
    event.dataTransfer!.dropEffect = 'copy'   // copy | move | link 不知道干嘛的,好像也没什么效果
    event.dataTransfer!.setData('text/plain', data)  // 添加数据
    console.log('item-drag-start: ')
}
function dragend(event: DragEvent){
    console.log('item-drag-end')
}

这样,关于被拖动元素需要设置的东西就是这些了。

这里先了解一下这个 DragEvent 里都有什么:

上面在 dataTransfer 里添加的数据,在 console.log() 里是看不到的,但它是在里面的,后面会从这个事件里提取。先看一下是怎样的,这个后面会具体说:

ts 复制代码
// 设置数据
event.dataTransfer!.setData('text/plain', data)

// 提取数据
const originalData = Number(event.dataTransfer!.getData("text/plain"))

2. 释放区域的事件

拖动释放区域,也就是接收区域 div.target 需要实现的事件是:

  • ondragover 当拖动元素悬于释放区域时,这个事件是连续触发的,每动一个像素都会被触发。
  • ondragenter 当拖动元素进入释放区域时,触发一次,不会连续触发
  • ondragleave 当拖动元素离开释放区域时,触发一次,不会连续触发
  • ondrop 当拖动元素在释放区域释放时,触发一次
html 复制代码
<div
    :class="['target', {'is-drag-entered': isDragEntered}]"
    :ondragover="onTargetDragover"
    :ondragenter="onTargetDragenter"
    :ondragleave="onTargetDragLeave"
    :ondrop="handleDrop"
>
    <div class="source-item"
         v-for="item in targetArray" :key="item">
        <span>item-{{item}}</span>
    </div>
</div>
ts 复制代码
const refTargetZone = ref()
onMounted(()=>{
    nextTick(()=>{
        refTargetZone.value.addEventListener('drop', handleDrop)
        // ondrop 的事件需要以这样的方式添加,直接写到 html 中不生效,不知道为什么
    })
})


/**
 * Drag Target
 */

const isDragEntered = ref(false)  // 实现拖动元素进入释放区域时,改变释放区域的样式,就是为了给个操作反馈

function onTargetDragover(event: DragEvent){
    event.preventDefault()  // 这里就特别注意,这行很关键
}
function onTargetDragenter(event: DragEvent){
    console.log('drag-enter: ')
    isDragEntered.value = true
}
function onTargetDragLeave(event: DragEvent){
    console.log('drag-enter: ',)
    isDragEntered.value = false
}

// 释放拖动的元素到目标区域时
function handleDrop(event: DragEvent){
    isDragEntered.value = false

    event.preventDefault() // 这里就特别注意,这行很关键
    const originalData = Number(event.dataTransfer!.getData("text/plain")) // 取事件中的数据,这个数据是拖动开始时设置的。

    // 数据变化
    // 因为 vue 是数据驱动的,这里只需要操作 源、目标 数据,即可实现页面上界面的变化,
    // 不需要像原生 dom 那样去操作 dom 来实现拖动的变化。
    targetArray.value.push(originalData) // 目标数组添加对应值
    sourceArray.value = sourceArray.value.filter(item => item !== originalData) // 源数组删除对应值

    console.log('--- on drop:', originalData)
}

五、更进一步

上面的例子里传递的是普通字符串,它也可以传递文件什么的,看官方具体是如何操作的。

拖动到某个序列的某个位置,可能就需要对事件的坐标位置进行进一步判断了。

官方说明页面及实例:https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API

六、完整代码

Drag.vue

html 复制代码
<template>
    <div class="drag-container">
        <el-row :gutter="50">
            <el-col :span="12">
                <div
                    :class="['target', {'is-drag-entered': isDragEntered}]"
                    :ondragover="onTargetDragover"
                    :ondragenter="onTargetDragenter"
                    :ondragleave="onTargetDragLeave"
                    :ondrop="handleDrop"
                >
                    <div class="source-item"
                         v-for="item in targetArray" :key="item">
                        <span>item-{{item}}</span>
                    </div>
                </div>
            </el-col>
            <el-col :span="12">
                <div class="source">
                    <div class="source-item"
                         :data="item"
                        :ondragstart="dragstart"
                        :ondragend="dragend"
                        draggable="true"
                        v-for="item in sourceArray" :key="item">
                        <span>item-{{item}}</span>
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>
<script setup lang="ts">
import {ref} from "vue";

const isDragEntered = ref(false)

const sourceArray = ref<Array<number>>([1,2,3,4,5,6])
const targetArray = ref<Array<number>>([])

/**
 * Drag Item
 */
function dragstart(event: DragEvent){
    let data = (event.target as HTMLElement).getAttribute('data') as string
    event.dataTransfer!.dropEffect = 'move'
    event.dataTransfer!.setData('text/plain', data)
    console.log('item-drag-start:' ,event)
}
function dragend(event: DragEvent){
    console.log('item-drag-end')
}

function handleDrop(event: DragEvent){
    isDragEntered.value = false

    event.preventDefault()
    const originalData = Number(event.dataTransfer!.getData("text/plain"))

    // 数据变化
    targetArray.value.push(originalData)
    sourceArray.value = sourceArray.value.filter(item => item !== originalData)

    console.log('--- on drop:', originalData)
}



/**
 * Drag Target
 */
function onTargetDragover(event: DragEvent){
    event.preventDefault()
    // console.log('drag-over: ', event)
}
function onTargetDragenter(event: DragEvent){
    console.log('drag-enter: ')
    isDragEntered.value = true
}

function onTargetDragLeave(event: DragEvent){
    console.log('drag-enter: ',)
    isDragEntered.value = false
}




</script>

<style scoped lang="scss">
.drag-container{
    padding: 30px;
}
.source, .target{
    padding: 20px;
    height: 400px;
    display: flex;
    flex-flow: row wrap;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    border: 2px solid #007AFF;
    background-color: white;
    &:hover{
        border-style: dashed;
    }
    .source-item{
        background-color: white;
        display: flex;
        align-items: center;
        justify-content: center;

        text-transform: uppercase;
        height: 60px;
        width: 100px;
        margin-bottom: 5px;
        margin-right: 5px;
        padding: 10px;
        text-align: center;
        border: 2px solid black;
        &:hover{
            background-color: #4CD964;
            cursor: pointer;
            user-select: none;
        }
    }
}

.source{

}
.target{
    border-color: #4CD964;
    &.is-drag-entered{
        background-color: #4CD964;
    }

}
</style>
相关推荐
以后不吃煲仔饭9 分钟前
Java基础夯实——2.7 线程上下文切换
java·开发语言
进阶的架构师9 分钟前
2024年Java面试题及答案整理(1000+面试题附答案解析)
java·开发语言
前端拾光者13 分钟前
利用D3.js实现数据可视化的简单示例
开发语言·javascript·信息可视化
程序猿阿伟15 分钟前
《C++ 实现区块链:区块时间戳的存储与验证机制解析》
开发语言·c++·区块链
傻啦嘿哟33 分钟前
如何使用 Python 开发一个简单的文本数据转换为 Excel 工具
开发语言·python·excel
大数据编程之光37 分钟前
Flink Standalone集群模式安装部署全攻略
java·大数据·开发语言·面试·flink
初九之潜龙勿用37 分钟前
C#校验画布签名图片是否为空白
开发语言·ui·c#·.net
Dola_Pan1 小时前
C语言:数组转换指针的时机
c语言·开发语言·算法
ExiFengs1 小时前
实际项目Java1.8流处理, Optional常见用法
java·开发语言·spring
paj1234567891 小时前
JDK1.8新增特性
java·开发语言