js拖放事件详解及实战

最新推荐文章于 2025-10-13 08:47:30 发布

原创

最新推荐文章于 2025-10-13 08:47:30 发布 · 1.8k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

本文详细介绍了HTML5拖放功能的基本原理，包括dragstart、drag、dragend、dragenter、dragover和drop等事件的使用，以及如何在拖动过程中传递数据和使用拖放图像。还提供了实际案例，如拖动元素排序和歌单操作，展示了数据交换和元素定位的技巧。

一：基础知识

    传统的拖放式根据鼠标按下松开事件完成的
    HTML5对于拖放只需要在元素上面设置draggable="true"属性,移动端不支持
    <div draggable="true"></div>
    拖放事件：
        dragstart  当一个元素开始被拖拽的时候触发
        drag  这个事件在拖拽源触发
        dragend  拖拽源在拖拽操作结束将得到dragend事件对象，不管操作成功与否
        dragenter  当拖拽中的鼠标第一次进入一个元素时触发
        dragover  当拖拽中的鼠标移动经过一个元素时触发
        dragleave  当拖拽中的鼠标离开元素时触发
        drop  这个事件在拖拽操作结束释放时于释放元素上触发
    注：在拖拽的时候只会触发拖拽的相关事件，鼠标事件，例如mousemove是不会触发的。

以下是基础代码演示：

<!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>
        #mydiv{
     
     
            width: 150px;
            height: 150px;
            background-color: rgba(100, 50, 50, 0.3);
        }
        #container{
     
     
            width: 400px;
            height: 400px;
            background-color: aqua;
            opacity: 0.3;
            margin: 50px auto;
        }
    </style>
</head>
<body>
    <div id="mydiv" draggable="true"></div>
    <div id="container"></div>
    <script>
        var mydiv = document.getElementById("mydiv");

        // 拖事件  开始
        mydiv.ondragstart = function(){
     
     
            console.log('开始拖');
        }

        // 拖事件  正在  一直触发
        mydiv.ondrag = function(){
     
     
            console.log('正在拖');
        }

        // 拖事件  结束
        mydiv.ondragend = function(){
     
     
            console.log('结束拖');
        }

        // 放元素
        var container = document.getElementById('container');

        // 放事件 进入了
        container.ondragenter = function(){
     
     
            console.log('放入了');
        }

        // 放事件 放在上面  持续触发
        container.ondragover = function(e){