HTML5+JS DOM操作实现拖拽效果

最新推荐文章于 2022-11-09 10:33:20 发布

TreasureÂ°

最新推荐文章于 2022-11-09 10:33:20 发布

阅读量545

点赞数

文章标签： javascript html5 前端

本文链接：https://blog.csdn.net/weixin_43582313/article/details/105106926

版权

本文介绍如何利用HTML5的拖放API和JavaScript实现一个简单的拖拽效果。通过设置元素的draggable属性为true，结合拖放事件如ondragstart、ondragend、ondrop等，可以创建拖拽交互。在ondragstart中存储元素ID，在ondrop中获取ID并将其追加到目标元素。注意需要阻止浏览器默认的ondrop行为以实现拖放功能。

摘要由CSDN通过智能技术生成

HTML5新增了拖放API，现在我们用HTML5+JS实现一个简单的拖拽效果，如下图所示，可以拖拽粉色的p元素到任意div中去
在这里插入图片描述
实现思路：
1.要让元素可以拖拽要给元素设置属性draggable=“true”
2.了解拖放API的拖拽事件：
作用于被拖拽元素的事件：
ondrag 应用于拖拽元素，整个拖拽过程都会调用
ondragstart 应用于拖拽元素拖拽开始时调用
ondragleave 应用于拖拽元素当鼠标离开拖拽元素时调用
ondragend 应用于拖拽元素拖拽结束时调用
作用于目标元素的事件：
ondragenter 应用于目标元素当拖拽元素进入时调用
ondragover 应用于目标元素当停留在目标元素时调用
ondrop 应用于目标元素当在目标元素松开鼠标时调用
ondragleave 应用于目标元素当鼠标离开目标元素时调用
3.在ondragstart中获取并设置被拖拽的元素的id,
在ondrop中获取在ondragstart中存储的id，并用appendChild追加被拖拽元素到目标元素
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>html5-拖拽</title>
    <style>
        .box {
   
            width: 200px;
            height: 200px;