zoukankan      html  css  js  c++  java
  • 每日分享!~ JavaScript(拖拽事件)

    浏览器的拖拉事件 

    拖拉(drag)指的是,用户在某个对象上按下鼠标键不放,拖动它到另一个位置,然后释放鼠标键,将该对象放在那里。

    拖拉的对象有好几种,包括元素节点、图片、链接、选中的文字等等。在网页中,除了元素节点默认不可以拖拉,其他(图片、链接、选中的文字)都是可以直接拖拉的。为了让元素节点可拖拉,可以将该节点的draggable属性设为true

    注意这点哦!!!如果需要这个元素具有拖拉功能,必须要设置一个属性draggable=true 。

    当元素节点或选中的文本被拖拉时,就会持续触发拖拉事件,包括以下一些事件。

    • drag:拖拉过程中,在被拖拉的节点上持续触发(相隔几百毫秒)。
    • dragstart:用户开始拖拉时,在被拖拉的节点上触发,该事件的target属性是被拖拉的节点。通常应该在这个事件的监听函数中,指定拖拉的数据。
    • dragend:拖拉结束时(释放鼠标键或按下 ESC 键)在被拖拉的节点上触发,该事件的target属性是被拖拉的节点。它与dragstart事件,在同一个节点上触发。不管拖拉是否跨窗口,或者中途被取消,dragend事件总是会触发的。
    • dragenter:拖拉进入当前节点时,在当前节点上触发一次,该事件的target属性是当前节点。通常应该在这个事件的监听函数中,指定是否允许在当前节点放下(drop)拖拉的数据。如果当前节点没有该事件的监听函数,或者监听函数不执行任何操作,就意味着不允许在当前节点放下数据。在视觉上显示拖拉进入当前节点,也是在这个事件的监听函数中设置。
    • dragover:拖拉到当前节点上方时,在当前节点上持续触发(相隔几百毫秒),该事件的target属性是当前节点。该事件与dragenter事件的区别是,dragenter事件在进入该节点时触发,然后只要没有离开这个节点,dragover事件会持续触发。
    • dragleave:拖拉操作离开当前节点范围时,在当前节点上触发,该事件的target属性是当前节点。如果要在视觉上显示拖拉离开操作当前节点,就在这个事件的监听函数中设置。
    • drop:被拖拉的节点或选中的文本,释放到目标节点时,在目标节点上触发。注意,如果当前节点不允许drop,即使在该节点上方松开鼠标键,也不会触发该事件。如果用户按下 ESC 键,取消这个操作,也不会触发该事件。该事件的监听函数负责取出拖拉数据,并进行相关处理。

     

    ---- 非常抱歉了 。这个不能显示动态图~~~~

    下面的代码就是上图测试的————-

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            .box {
                width: 300px;
                height: 300px;
                background-color: rgb(67, 218, 205);
                float: left;
                margin: 100px;
            }
    
            #darg {
                width: 100px;
                height: 100px;
                background-color: pink;
            }
        </style>
    </head>
    
    <body>
        <div class="box">
            <div id="darg" draggable="true"></div>
        </div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <script>
            // 定义一个变量来存放拖拽物
            var dragged
            // dragstart
            document.addEventListener('dragstart', (e) => {
                // 将拖拽目标法放入dragged 
                dragged = e.target
                // 将被拖拽物设置透明度
                e.target.style.opacity = 0.5
            })
            // dragend 
            document.addEventListener('dragend', (e) => {
                // 将透明度设置为原来的样子
                e.target.style.opacity = ''
            })
            // dragover 
            document.addEventListener('dragover', (e) => {
                // 阻止默认事件
                e.preventDefault()
            })
            // dragenter
            document.addEventListener('dragenter', (e) => {
                // 也又默认事件,需要先去掉
                e.preventDefault()
                // 防止事件冒泡,需要进行过滤
                if (e.target.className === 'box') {
                    // 设置背景色
                    e.target.style.backgroundColor = 'purple'
                }
            })
            // dragleave 
            document.addEventListener('dragleave', (e) => {
                if (e.target.className === 'box') {
                    e.target.style.backgroundColor = ''
                }
            })
            // drop 
            document.addEventListener('drop', (e) => {
                // 阻止事件的默认事件 
                e.preventDefault()
                // 判断自己要放置的节点是哪个
                // 需要恢复颜色
                e.target.style.backgroundColor = ''
                if (e.target.className === 'box') {
                    dragged.parentNode.removeChild(dragged)
                    e.target.appendChild(dragged)
                }
            })
        </script>
    </body>
    
    </html>

    总结:要完成这个,必须注意每个事件触发的事件~~~

  • 相关阅读:
    【转+补充】在OpenCV for Android 2.4.5中使用SURF(nonfree module)
    Delphi StarOffice Framework Beta 1.0 发布
    Angular ngIf相关问题
    angularjs文档下载
    公众号微信支付开发
    公众号第三方平台开发 教程六 代公众号使用JS SDK说明
    公众号第三方平台开发 教程五 代公众号处理消息和事件
    公众号第三方平台开发 教程四 代公众号发起网页授权说明
    公众号第三方平台开发 教程三 微信公众号授权第三方平台
    公众号第三方平台开发 教程二 component_verify_ticket和accessToken的获取
  • 原文地址:https://www.cnblogs.com/yaogengzhu/p/10765236.html
Copyright © 2011-2022 走看看