编程笔记

编程笔记

前端系列——HTML5,Vue拖拽
2025-01-29

前端系列——HTML5,Vue拖拽

  • HTML5拖拽
    • 拖拽目标触发的事件
    • 释放目标时触发的事件
    • 阻止默认事件方法执行
    • DataTransfer传递媒介
      • 方法
        • 设置自身
        • 设置图像
    • 示例代码1
      • 效果截图
    • 示例代码2
      • 效果截图
  • Vue-Draggable插件拖拽
    • 文档
    • 安装
    • 导入

HTML5拖拽

使用属性draggable即可实现对于元素的拖拽

<div draggable="true" id="test1"></div>

拖拽目标触发的事件

  1. ondragstart: 开始拖拽触发
  2. ondrag: 正在拖拽触发
  3. ondragend: 结束拖拽触发

释放目标时触发的事件

  1. ondragenter:进入容器内触发
  2. ondragover:拖动对象在另一个对象容器范围内触发
  3. ondragleave:拖动对象离开容器触发
  4. ondrop:释放鼠标触发

阻止默认事件方法执行

Event.preventDefault()

阻止默认的些事件方法等执行。在ondragover中一 定要执行preventDefault(), 否则ondrop事件不会被触
另外,如果是从其他应用软件或是文件中拖东西进来,尤其是图片的时候,默认的动作是显示这个图片或是相关信息,还是真的执行drop。此时需要用document的ondragover事件把它直接干掉

DataTransfer传递媒介

Event.dataTransfer()

用于保存拖动并放下过程中的数据

方法

  1. setData(type,data):声明所发送的数据与类型
  2. getData(type):返回指定类型的数据
  3. clearData(type):删除指定类型的数据
  4. setDragImage(ImageObject,x,y):设置鼠标选中图像
设置自身
event.dataTransfer().setDragImage(event.target,0,10)
设置图像
const image = new Image()
image.src = '图片位置'
event.dataTransfer().setDragImage(image,0,10)

示例代码1

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>D