HTML5-拖拽-通用

最新推荐文章于 2024-09-12 10:14:05 发布

943学前端

最新推荐文章于 2024-09-12 10:14:05 发布

阅读量114

点赞数

分类专栏： HTML5笔记文章标签： html5 javascript css

本文链接：https://blog.csdn.net/weixin_49924309/article/details/107851924

版权

HTML5笔记专栏收录该内容

16 篇文章 0 订阅

订阅专栏

HTML5拖拽

	在h5中。如果想拖拽元素，就必须为元素添加draggable="true".图片和超链接默认就可以拖拽

	ondrag          应用于拖拽元素，整个拖拽过程都会调用--持续触发
    ondragstart     应用于拖拽元素，当拖拽开始调用
    ondragleave     应用于拖拽元素，当鼠标离开拖拽元素时调用
    ondragend       应用于拖拽元素，当拖拽结束时调用

	ondragenter         应用于目标元素，当拖拽元素进入时调用
    ondragover          应用于目标元素，当停留在目标元素上时调用
    ondrop              应用于目标元素，当目标元素松开鼠标时调用
    ondragleave         应用于目标元素，当鼠标离开目标元素时调用

通过dataTransfer来实现数据的存储与获取
setData(format,data):
format:数据的类型: text/html text/uri-list
Data:数据：一般来说是字符串值

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .div1 {
            width: 200px;
            height: 200px;
            border: 1px solid red;
            position: relative;
            margin-left: 20px;
            float: left;
        }
        
        .div2 {
            width: 200px;
            height: 200px;
            border: 1px solid skyblue;
            position: relative;
            margin-left: 20px;
            float: left;
        }
        
        .div3 {
            width: 200px;
            height: 200px;
            border: 1px solid green;
            position: relative;
            margin-left: 20px;
            float: left;
        }
        
        p {
            background-color: orange;
            margin-top: 5px;
        }
    </style>
</head>

<body>
    <div class="div1" id="div1">
        <!-- 在h5中。如果想拖拽元素，就必须为元素添加draggable="true".图片和超链接默认就可以拖拽 -->
        <p id="pe" draggable="true">试着把我拖过去</p>
        <p id="pe1" draggable="true">也试着把我拖过去</p>
    </div>
    <div class="div2" id="div2"></div>
    <div class="div3" id="div3"></div>
    <script>
        
        document.ondragstart = function(e) {
            // 通过事件捕获来获取当前被拖拽的子元素
            e.target.style.opacity = 0.5; //改变拖拽体的背景半透明
            e.target.parentNode.style.borderWidth = "5px"; //改变父盒子的边框
            obj = e.target; //拿到拖拽的元素
            // 通过dataTransfer来实现数据的存储与获取
            // setData(format,data):
            // format:数据的类型: text/html        text/uri-list
            // Data:数据：一般来说是字符串值
            e.dataTransfer.setData("text/html", e.target.id);
        }
        document.ondragend = function(e) {
            e.target.style.opacity = 1; //改变拖拽体的背景半透明
            e.target.parentNode.style.borderWidth = "1px"; //改变父盒子的边框
        }
        document.ondragleave = function(e) {}
        document.ondrag = function(e) {}

        document.ondragenter = function(e) {}
        document.ondragover = function(e) {
                // 如果想触发ondrop事件，那么就必须在这个位置阻止浏览器的默认行为
                e.preventDefault();
            }
            // 浏览器默认会阻止ondrop事件：我们必须在ondragover中阻止浏览器的默认行为
        document.ondrop = function(e) {
        
            // 通过e.dataTransfer.setData存储数据，只能在drop事件中获取
            var id = e.dataTransfer.getData("text/html");
         
            e.target.appendChild(document.getElementById(id));
        }
        document.ondragleave = function(e) {}
    </script>
</body>

</html>