HTML | DOM ondragleave 事件(1)

📌 相关文章

📜 HTML | DOM ondragleave 事件(1)

📅 最后修改于: 2023-12-03 15:15:35.416000 🧑 作者: Mango

HTML | DOM ondragleave 事件

在 HTML 中，ondragleave 事件会在拖动对象离开其容器时触发。此事件用于指定当对象被拖出容器时所发生的操作。

语法

以下是 ondragleave 事件的语法：

object.ondragleave = function(){myScript};

实例

例如，在以下示例中，当拖动元素移出容器时，弹出一个提示框：

<!DOCTYPE HTML>
<html>
<head>
    <style>
        #mydiv {
            width: 250px;
            height: 70px;
            border: 1px solid #aaaaaa;
            margin: 10px;
            padding: 10px;
        }
    </style>
    <script>
        function allowDrop(event){
            event.preventDefault();
        }
        function drag(event){
            event.dataTransfer.setData("Text", event.target.id);
        }
        function drop(event){
            event.preventDefault();
            var data=event.dataTransfer.getData("Text");
            event.target.appendChild(document.getElementById(data));
        }
        function leave(event){
            alert("已经离开容器");
        }
    </script>
</head>
<body>
<p>请拖动整个框从左侧列到右侧列中。</p>
<div id="mydiv" ondragover="allowDrop(event)" ondrop="drop(event)" ondragleave="leave(event)"></div>
</body>
</html>

在这个例子中，如果拖动元素从容器中移出到容器以外的部分，就会触发 ondragleave 事件，并弹出提示。

支持的浏览器

ondragleave 事件受到所有主流浏览器的支持。

总结

使用 ondragleave 事件，可以指定当拖动对象离开容器时所发生的操作。通过对这个事件的处理，可以为用户提供更好的拖拽体验。