h5 拖拽接口中遇到的问题

最新推荐文章于 2023-03-22 23:21:27 发布

xdAdvent

最新推荐文章于 2023-03-22 23:21:27 发布

阅读量783

点赞数

CC 4.0 BY-SA版权

分类专栏： H5 文章标签： html h5

本文链接：https://blog.youkuaiyun.com/xdAdvent/article/details/101038955

H5 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了HTML5拖拽接口的基本知识，包括应用于被拖拽和目标元素的事件，以及如何通过dataTransfer存储和获取数据。强调了在实现拖拽功能时需要注意的几点，如设置draggable属性，阻止浏览器默认行为，以及正确处理类名。同时，文章详细讨论了在使用class进行元素操作时遇到的问题，指出需使用className并可能需要添加索引以避免冲突。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

拖拽接口基本知识

1. 应用于被拖拽元素的事件

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

2. 应用于目标元素的事件

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

3. 通过dataTransfer来实现数据的存储与获取

setData(format,data):
format:数据的类型：text/html text/uri-list
Data:数据:一般来说是字符串值

拖拽接口注意点

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

<p class="p" draggable="true">史森明世界第一可爱</p>

2.一般情况下多个元素需要拖拽时，避免重复代码降低效率，选择在document上添加事件

document.ondragstart=function(e){
        e.dataTransfer.setData("text/html", e.target.id);
    }

3.浏览器默认会阻止ondrop事件：必须在ondragover事件中阻止浏览器的默认行为

document.ondragover=function(e){
        e.preventDefault();
    }

4.通过e.dataTransfer.setData存储的数据，只能在drop事件中获取

document.ondrop=function(e){
        var id=e.dataTransfer.getData("text/html");
        e.target.appendChild(document.getElementById(id));
    }

拖拽接口遇到的问题

在写代码时主要遇到的问题是class和id的问题，本人接触前端时间较短，在给标签添加属性时习惯使用class添加类样式以备后面使用。

1. 如果使用id

<body>
    <div class="div1"><p id="p" draggable="true">史森明世界第一可爱</p></div>
    <div class="div2"></div>
    
    <script>
        var obj=null;
        document.ondragstart = function(e){
            obj= e.target;
            e.dataTransfer.setData("text/html", e.target.id);
        }
        document.ondragover = function(e){
            e.preventDefault();
        }
        document.ondrop = function(e){
            var id = e.dataTransfer.getData("text/html");
            e.target.appendChild(document.getElementsById(id));
        }
    </script>
</body>

2. 如果使用class

<body>
    <div class="div1"><p class="p" draggable="true">史森明世界第一可爱</p></div>
    <div class="div2"></div>
    
    <script>
        var obj=null;
        document.ondragstart = function(e){
            obj= e.target;
            e.dataTransfer.setData("text/html", e.target.className);
        }
        document.ondragover = function(e){
            e.preventDefault();
        }
        document.ondrop = function(e){
            var id = e.dataTransfer.getData("text/html");
            e.target.appendChild(document.getElementsByClassName(id)[0]);
            //或者e.target.appendChild(document.querySelected(id))；
        }
    </script>
</body>

需要注意的是若使用class：

e.dataTransfer.setData("text/html", e.target.className);需使用className, 不能使用class
e.target.appendChild(document.getElementsByClassName(id)[0]);不同于id的唯一性，class一组，从elements可以发现，所以需要在此处添加索引。注意不能再前面e.target.className处添加，添加无效。
除2方法外还可以使用e.target.appendChild(document.querySelected(id))；但需注意，querySelected只获取第一个

在使用class不当报错时，出现此类报错：Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'. at HTMLDocument.document.ondrop