html5中的拖放事件

最新推荐文章于 2024-04-02 00:28:32 发布

雾眠气泡水@

最新推荐文章于 2024-04-02 00:28:32 发布

阅读量921

点赞数

分类专栏： html5 文章标签： html5 javascript

本文链接：https://blog.csdn.net/m0_60489011/article/details/120335359

版权

html5 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1 定义

拖放是一种常见的特性，即抓取对象以后拖到另一个位置。

在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。

2 动作

(1)dragstart 按下鼠标并开始移动鼠标，就会触发这个事件，我们通过ondargstart来调用方法。

(2)drag 当dragstart开始，会持续触发darg这个事件。

【类似mousemove事件，不能放太复杂的代码】

(3)dragend 当拖放停止时（鼠标放开时），这个事件会被调用

(4)dragenter 拖动元素被放到了放置元素上会触发这个事件。

(5)dragleave 拖动元素从放置元素上移出

(6)dragover 拖动元素在防止元素范围内移动

(7)drop 放置事件结束时，会触发这个事件。

拖放事件的生命周期：

dragstart > drag > dragenter > dragover > drop > dragend

3 数据交互

通过dataTransfer去保存，获取数据，只能在拖放事件处理程序中使用

方法：

event.dataTransfer.setData(key,value);

event.dataTransfer.setData(key);

每个 drag event 都有一个 dataTransfer 属性，其中保存着事件的数据。

4 放置目标

<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

ondrop：当元素或选中的文本在可释放目标上被释放时触发

ondragover：当元素或选中的文本被拖到一个可释放目标上时触发（每100毫秒触发一次）。

5 拖放元素

<img draggable="true" ondragstart="drag(event)" src="./4.jpg" alt="">

draggable：是一个枚举类型的属性，用于标识元素是否允许拖动。它的取值如下：

true，表示元素可以被拖动

false，表示元素不可以被拖动

droppable：用于标识元素是否允许放置其他的元素。

ondragstart：当用户开始拖拽一个元素或选中的文本时触发

6 案例：

将图片从一个框拖放到另一个框里

<!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>拖放</title>
    <style>
        #div1,#div2{
            border:1px solid #aaa;
            width: 200px;
            height: 200px;
            margin: 10px;
            padding: 10px;
            float: left;
        }
    </style>
</head>
<body>
    <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
        <img style="border: 1px solid #aaa;" draggable="true" ondragstart="drag(event)" height="100px" src="./4.jpg" alt="" id="img">
    </div>
    <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</body>
<script>
    function allowDrop(ev){
        ev.preventDefault();
        //preventDefault():如果此事件没有被显式处理，它默认的动作也不应该照常执行。
    }
    function drag(ev){
        ev.dataTransfer.setData("Text",ev.target.id);
    }
    //结束整个拖放事件
    function drop(ev){
        ev.preventDefault();
        var data = ev.dataTransfer.getData("Text");
        ev.target.appendChild(document.getElementById(data));
    }
</script>
</html>

雾眠气泡水@

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
html5中的拖放事件

1 定义拖放是一种常见的特性，即抓取对象以后拖到另一个位置。在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。2 动作 (1)dragstart按下鼠标并开始移动鼠标，就会触发这个事件，我们通过ondargstart来调用方法。(2)drag当dragstart开始，会持续触发darg这个事件。【类似mousemove事件，不能放太复杂的代码】(3)drag...
复制链接

扫一扫

专栏目录