拖动事件

最新推荐文章于 2024-07-17 15:26:15 发布

司強

最新推荐文章于 2024-07-17 15:26:15 发布

阅读量243

点赞数

分类专栏： javaScript 文章标签： javascript

本文链接：https://blog.csdn.net/SiQianglove/article/details/109588884

版权

javaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

标签属性
draggable：true

事件

被拖动的源对象可以触发的事件

ondragstart：被拖动
ondrag：被拖动过程中
ondragend：源对象被拖动结束

被拖动的源对象可以触发的事件

ondragstart：被拖动**
ondrag：被拖动过程中
ondragend：源对象被拖动结束

拖动源对象可以进入到上方的目标对象可以触发的事件

ondragover：目标对象悬停在源对象上方 （return false）阻止默认事件
ondragleave：目标对象被拖拽离开源对象
ondrop ：目标对象在源对象上松手
ondragenter：被拖动进入

event.target 同当前this

```css
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        div {
            width: 200px;
            height: 200px;
            border: 1px solid red;
            float: left;
            margin: 10px;
        }
        
        div:nth-child(2) {
            border: 1px solid green;
        }
        
        div:last-child {
            border: 1px solid blue;
        }
        
        p {
            height: 25px;
            background-color: pink;
            line-height: 25px;
            text-align: center;
        }
    </style>
</head>

<body>
    <div id="div1">
        <p id="p1" draggable="true">拖拽内容1</p>
        <p id="p2" draggable="true">拖拽内容2</p>
        <p id="p3" draggable="true">拖拽内容3</p>
    </div>
    <div id="div2"></div>
    <div id="div3"></div>
    <!-- 
        事件：onclick onmouseover/onmouseout onmousemove/onmouseenter onload onchange   onfocus/onblur onscroll


     -->
    <script>
        // 当选中的元素被拖动时
        var obj = {}
        document.ondragstart = function(e) {
            obj = e.target
            console.log("被拖动");
            document.getElementById("p1").ondragstart = function() {
                    console.log("被拖动");
                }
                // 当选中的元素拖拽过程中
            document.getElementById("p1").ondrag = function() {
                    console.log("被拖动过程");
                }
                // 当选中的元素结束
            document.getElementById("p1").ondragend = function() {
                    console.log("被拖动结束");
                }
                //目标对象被拖拽进入
            document.getElementById("div2").ondragenter = function() {
                    console.log("被拖动进入");
                }
                //目标对象悬停在源对象上方
            document.ondragover = function(e) {
                    console.log("目标对象悬停在源对象上方");
                    // div = e.target
                    // 阻止默认事件
                    e.preventDefault()
                }
                // 目标对象被拖拽离开源对象
            document.getElementById("div3").ondragleave = function() {
                    console.log("目标对象被拖拽离开源对象");
                }
                //目标对象在源对象上松手
            document.ondrop = function() {
                console.log(1);
                event.target.appendChild(obj)
            }
        }
    </script>

</body>

</html>

司強

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
拖动事件

标签属性draggable：true事件被拖动的源对象可以触发的事件ondragstart：被拖动ondrag：被拖动过程中ondragend：源对象被拖动结束被拖动的源对象可以触发的事件ondragstart：被拖动**ondrag：被拖动过程中ondragend：源对象被拖动结束拖动源对象可以进入到上方的目标对象可以触发的事件ondragover：目标对象悬停在源对象上方（return false）阻止默认事件ondragleave：目标对象被拖拽离开源对象ond
复制链接

扫一扫