H5拖动事件复习

定义和用法

ondrag 事件在元素或者选取的文本被拖动时触发。

拖放是 HTML5 中非常常见的功能。更多信息可以查看我们 HTML 教程中的 HTML5 拖放。

注意： 为了让元素可拖动，需要使用 HTML5 draggable 属性。

提示： 链接和图片默认是可拖动的，不需要 draggable 属性。

在拖放的过程中会触发以下事件：

在拖动目标上触发事件 (源元素):
- ondragstart - 用户开始拖动元素时触发
- ondrag - 元素正在拖动时触发
- ondragend - 用户完成元素拖动后触发

释放目标时触发的事件:
- ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
- ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
- ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
- ondrop - 在一个拖动过程中，释放鼠标键时触发此事件

注意： 在拖动元素时，每隔 350 毫秒会触发 ondrag 事件。

<!DOCTYPE html>

<html lang="en">

    <head>

        <title>拖动事件</title>

        <meta charset="utf-8">

        <style>

            .box{

                width: 200px;

                height: 100px;

                border: 1px solid #c0a;

                margin: 20px;

                float: left;

            }

        </style>

    </head>

    <body>

        <div class="box">

            <p id="p"

            draggable="true"

            ondragstart="dragStart(event)"

            ondrag="drag(event)"

            ondragend="dragEnd(event)"

            >

            要拖动的内容</p>

        </div>

        <div class="box"

            ondragenter="dragEnter(event)"

            ondragleave="dragLeave(event)"

            ondragover="dragOver(event)"

            ondrop="drop(event)"

            id="dropBox"

        ></div>

        <script>

        //event事件对象，事件绑定在谁身上就是谁

        var log = console.log;

        function dragStart(event){

            //开始拖动时触发，事件对象是拖动元素本身

            log(`dragStart`,event)

        }

        function drag(event){

            //拖动中触发 ondrag事件每350毫秒触发一次

            //log('drag',event)

        }

        function dragEnd(event){

            //拖动结束时触发

            log('dragEnd',event)

        }

        function dragEnter(event){

            //拖动的元素进入放置的目标时触发, 事件对象是目标元素

            log('dragEnter',event)

        }

        function dragLeave(event){

            //离开时触发

            log('dragLeave',event)

        }

        function dragOver(event){

            event.preventDefault();

            //log('dragOver',event)

        }

        function drop(event){

            event.preventDefault();

            log('drop',event)

            var p = document.querySelector('#p');

            var dropBox = document.querySelector('#dropBox');

            dropBox.appendChild(p)

        }

        </script>

    </body>

</html>

巴特西

H5拖动事件复习

定义和用法

最新文章

热门文章