案例一：javascript的拖拽事件(drag，drop)

本文链接：https://blog.youkuaiyun.com/weixin_46022934/article/details/127372947

案例一：

提示：以前写过关于图片的拖拽效果；今天主要写一下例如自定义的一些div拖拽这种

文章目录

案例一：
前言
一、拖拽效果如下步骤所示
二、具体代码如下
总结：下面的🔗是跳转到案例二（关于表格的拖拽的效果）

前言

提示：主要是为了积累遇到的问题，和别人询问的问题（俗话说的好，好记性不如烂笔头，所以记录问题和解决问题个人感觉是非常重要的！！！！！）

提示：以下是本篇文章正文内容，下面案例可供参考

一、拖拽效果如下步骤所示

1.正常的排序如下：

在这里插入图片描述

2.拖拽列表1与列表2互换位置

常按的效果如下图：

在这里插入图片描述

切换位置后的效果如下图：

在这里插入图片描述

二、具体代码如下

1.HTML部分代码块

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul{
            width: 25%;
           margin: 0 auto;
        
        }
        .trs{
            width: 180px;
            text-align: center;
            border: 2px dashed rgb(214, 134, 36)  ;
            background-color: rgb(227, 230, 232);
            margin-top: 12px;
        }
    </style>
</head>
<body>
    <!-- 主体dom结构 -->
   <ul>
        <div class="trs" draggable="true">列表1</div>
        <div class="trs" draggable="true">列表2</div>
        <div class="trs" draggable="true">列表3</div>
        <div class="trs" draggable="true">列表4</div>
        <div class="trs" draggable="true">列表5</div>
   </ul>
</body>
</html>

2.javascript部分代码块

代码如下（示例）：

 <script>
    let listText =""
    // 第一步：获取DOM节点 (这里我使用的时间冒泡，就不用给单独给每个div绑定事件了)
       var ul = document.querySelector('ul')
    //第二步：添加dragstart事件 (这里是拖拽前触发的时间，不要使用preventDefault阻止默认时间)
        ul.addEventListener('dragstart',function(event){
            event.dataTransfer.setData('drag_text',event.target.innerHTML)  //1.设置拖拽元素的DOM
        })
    // 第三步：添加dragover事件 (这个事件是必须添加的，不添加这个dragover事件，drop事件触发不了)
        ul.addEventListener('dragover',function(event){
            event.preventDefault() // ****************************必须声明的事件*****************************8
        })

    // 第四步：添加drop拖拽完成事件 (主要是监听完成拖拽的事件)
        ul.addEventListener('drop',function(event){
            event.preventDefault()
            listText =event.target.innerHTML  //3.获取到目标元素的DOM
            const drag_text =event.dataTransfer.getData('drag_text') //2.获取到拖拽元素的DOM
            event.target.innerHTML=drag_text  //4.将目标元素更改为拖拽元素
        })
        ul.addEventListener('dragend',function(event){
            event.preventDefault()
            event.target.innerHTML=listText
           
        })
        
   </script>