JS原生拖拽功能draggable属性（H5）

最新推荐文章于 2024-05-31 09:59:16 发布

菜鸟搬砖记

最新推荐文章于 2024-05-31 09:59:16 发布

阅读量1.2w

点赞数 3

分类专栏： JavaScript大杂烩文章标签： html5 js

本文链接：https://blog.csdn.net/hope93/article/details/90740264

版权

JavaScript大杂烩专栏收录该内容

21 篇文章 9 订阅

订阅专栏

在html5中多了一个元素属性draggable，这个属性可以对元素进行拖拽

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
       .box {
           width:500px;
           height: 150px;
           border:1px solid black;
           margin-top: 40px;
       }
    </style>

    <script>
        function dragstart(event) {
            // 将拖拽对象id存储在dataTransfer中
            event.dataTransfer.setData("dragContent", event.target.id);
        }
 
        function drop(event){
              event.preventDefault();
            //把拖拽对象放入目标容器中
            let data = event.dataTransfer.getData('dragContent');
            event.target.appendChild(document.getElementById(data))
        }
 
        function dragover(event) {
           event.preventDefault();
        }
     </script>
</head>
<body>
    <div id='dragId' draggable='true' ondragstart="dragstart(event)">我是可以拖拽的文字</div>

    <div id='dragboxId' class="box" ondrop="drop(event)" ondragover='dragover(event)'></div>


</body>
</html>

注意点：

1.拖拽对象跟放置目标元素都得添加元素id，以便在控制拖拽过程中获取此元素

2.拖拽对象必须得设置draggable值，还得添加ondragstart方法，在此方法中，得把拖拽对象的id存储起来，以便后期拿出来调用

3.目标对象得添加方法ondrop，在这个方法中取出拖拽对象进入操作，此外还得添加ondragover，去掉浏览器默认值

以上就是html5中新增的拖拽功能

菜鸟搬砖记

关注

3
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
JS原生拖拽功能draggable属性（H5）

在html5中多了一个元素属性draggable，这个属性可以对元素进行拖拽<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scal...
复制链接

扫一扫