【学习笔记26】事件拖放

m0_1229

于 2021-09-17 14:24:31 发布

阅读量243

点赞数

分类专栏：学习前端文章标签： javascript

本文链接：https://blog.csdn.net/m0_60525480/article/details/120348204

版权

1.dragstart按下鼠标按键并开始移动鼠标，会触发dragstart事件,我们通过ondragstart来调用方法

drag 当dragstart开始，会持续触发drag事件，类似mousemove事件

dragend 当拖放停止时（即鼠标按键抬起时），会触发

dragenter 拖动元素被拖动到放置元素上

dragleave 拖动元素从放置元素上移出

dragover 拖动元素在放置元素范围内移动

drop 放置事件

拖放事件生命周期:dragstart-drag-dragenter-dragover-drop-dragend

数据交互：通过dataTransfer去保存获取数据，只能在拖动事件处理程序中使用。event.dataTransfer

方法：dataTransfer.setData(key,value);dataTransfer.getData(key);

定义放置目标 οndrοp="drop(event)" οndragοver="allowDrop(event)"

定义拖动元素 id="image" draggable="true" οndragstart="drag(event)"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewpo

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

关注关注