【学习笔记26】事件拖放

最新推荐文章于 2022-08-31 22:05:49 发布

m0_1229

最新推荐文章于 2022-08-31 22:05:49 发布

阅读量266

点赞数

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

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

版权

本文详细介绍了JavaScript中的拖放事件，包括dragstart、drag、dragend、dragenter、dragleave、dragover和drop等事件及其生命周期。同时，讲解了数据交互过程中的dataTransfer对象使用方法。此外，还探讨了Web存储技术，如sessionStorage和localStorage的特点及应用。最后提及了WebSocket技术在实现双向实时通信中的作用。

摘要由CSDN通过智能技术生成

拖放事件

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

最低0.47元/天解锁文章

m0_1229

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录