文章目录

• HTML5 元素拖放
• • 概述
  • 触发事件
  • • 实现元素拖放功能
  • dataTransfer
  • • 元素拖动效果
    • 垃圾箱效果

HTML5 元素拖放

概述

在HTML5中，我们只需要给元素添加一个draggable属性，然后设置该属性值为true，就能实现元素的拖放。

拖放，指的是“拖曳”和“释放”。在页面中进行一次拖放操作，我们必须先弄清楚两个元素：“源元素”和“目标元素”。“源元素”指的是被拖曳的那个元素，“目标元素”指的是源元素最终被释放到的那个元素。

触发事件

源元素触发的事件

目标元素触发的事件

实现元素拖放功能

说明

e.offsetX、e.offsetY分别表示鼠标相对于触发事件的对象的X坐标、Y坐标。

e.pageX、e.pageY分别表示鼠标相对于当前窗口的X坐标、Y坐标。

dataTransfer

在HTML5中，如果想要在元素拖放中实现数据传递，我们需要使用dataTransfer对象。dataTransfer对象主要用于在“源元素”与“目标元素”之间传递数据。

dataTransfer对象有两个最重要的方法：setData()和getData()。在整个拖曳过程中，具体操作是这样的：开始拖放源元素时（ondragstart事件），调用setData()方法保存数据；然后在放入目标元素时（ondrop事件），调用getData()方法读取数据。

setData()方法

可以使用setData()方法。

setData(format, data);

format格式

get()方法

可以使用getData()方法读取数据。

getData(format);

元素拖动效果

HTML
CSS
JavaScript
jQuery
Vue
 

垃圾箱效果