HTML5拖放API的简单应用

最新推荐文章于 2024-04-09 17:34:36 发布

梁萌

最新推荐文章于 2024-04-09 17:34:36 发布

阅读量809

点赞数 1

分类专栏： html/css 文章标签： HTML5 元素拖放

本文链接：https://blog.csdn.net/liangmengbk/article/details/83960384

版权

html/css 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

实现思路：

1.设置元素可拖放状态

2.为被拖拽元素传递数据

3.定义可放置元素的目标区域

4.接收被拖拽元素的传递数据

实例一：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>HTML5拖放API的简单应用</title>
    <style type="text/css">
    p {
        width: 100px;
        height: 100px;
        background-color: yellow;
    }

    div#container {
        border: 1px solid;
        width: 200px;
        height: 200px;
    }
    </style>
</head>

<body>
    <h3>HTML5拖放API的简单应用</h3>
    <hr>
    <p id="test" draggable="true" ondragstart="drag(event)">
        这是一个可以被拖放的段落元素
    </p>
    <div id="container" ondragover="allowDrop(event)" ondrop="drop(event)">
        这是一个可以用于放置被拖放元素的区域
    </div>
    <script type="text/javascript">
    //ondragstart事件回调函数
    function drag(ev) {
        //设置传递的内容为被拖拽元素的id名称，数据类型为纯文本类型
        ev.dataTransfer.setData("text/plain", ev.target.id);
    }
    //ondragover事件回调函数
    function allowDrop(ev) {
        //解禁当前元素为可放置被拖拽元素的区域
        ev.preventDefault();
    }
    //ondrop事件回调函数
    function drop(ev) {
        //解禁当前元素为可放置被拖拽元素的区域
        ev.preventDefault();
        //获取当前被放置元素的id名称
        var id = ev.dataTransfer.getData("text");
        //根据id名称获取元素对象
        var p = document.getElementById(id);
        //获取文件夹区域并添加该元素对象
        ev.target.appendChild(p);
    }
    </script>
</body>

</html>

拖拽页面效果：

实例二：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>HTML5拖放API的简单应用</title>
</head>

<body>
    <h3>HTML5拖放API的简单应用</h3>
    <hr>
    <img id="image" draggable src="boy.jpg" style="width: 200px; height: 200px;" />
    <div style="height: 500px; width: 500px; border: 1px solid red" ondragover="allowDrop(event)" ondrop="drop(this)">
        <script type="text/javascript">
        var imgObj = document.getElementById("image");//获取图片对象

        function allowDrop(event) {
            event.preventDefault(); //解禁当前元素为可放置被拖拽元素的区域
        }

        function drop(obj) {
            obj.appendChild(imgObj);//把图片对象添加到div中
        }
        </script>
</body>

</html>

拖拽效果图：

以上两个实例都可以实现将一个元素拖拽后放到另一个元素中的效果，但我觉得第二种更简单。

梁萌

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
HTML5拖放API的简单应用

实现思路：1.设置元素可拖放状态 2.为被拖拽元素传递数据3.定义可放置元素的目标区域4.接收被拖拽元素的传递数据实例一：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;HTML5拖放API
复制链接

扫一扫

专栏目录