html5拖放小实例

最新推荐文章于 2023-12-15 18:38:43 发布

luoyu6

最新推荐文章于 2023-12-15 18:38:43 发布

阅读量236

点赞数

CC 4.0 BY-SA版权

分类专栏： js HTML5

本文链接：https://blog.youkuaiyun.com/luoyu6/article/details/82891276

js 同时被 2 个专栏收录

19 篇文章

订阅专栏

HTML5

3 篇文章

订阅专栏

本文深入解析HTML5拖放API的工作原理，包括ondragstart、ondragover、ondrop等关键事件，通过一个示例展示如何实现元素在页面间的拖拽功能。文章详细介绍了拖放操作的四个必要步骤，并提供了完整的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

   参照物：拖放的元素和目标点

                API事件:
                    ondragstart:开始拖放元素触发的事件 , 对象：拖放的元素
                    ondrag:拖放过程中触发的事件，对象：拖放的元素

                    ondragenter：有拖放的元素进入目标元素时触发的事件，   对象：目标元素
                    ondragover:有拖放的元素在目标元素内移动触发的事件：对象：目标元素
                    ondragleave：有拖放的元素离开目标元素触发的事件，对象：目标元素
                    ondrop:有拖放的元素在本元素松开的时候触发的事件对象：目标元素

ondragend：拖放元素结束触发的事件对象：拖放的元素

/完成一个拖动过程必须有的4个步骤

draggable="true"， ondragstart， ondragover ，ondrop

以下有个小实例：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #box ,#box1{
                width: 200px;
                height: 100px;
                border: 1px solid;
                margin-top:10px ;
            }
        </style>
    </head>    <body>
        <img src="http://www.w3school.com.cn/i/eg_dragdrop_w3school.gif" id="mg" draggable="true" ondragstart="drag(event)" />
        <div id="box" ondrop="drop(event)" ondragover="allowDrop(event)" ondragenter="enter(event)" ondragleave="leave(event)"></div>
        <div id="box1" ondrop="drop(event)" ondragover="allowDrop(event)" ondragenter="enter1(event)" ondragleave="leave1(event)"></div>
    
    </body>
    <script type="text/javascript">
       
        
        function drag(ev) {
            ev.dataTransfer.setData("Text", ev.target.id);
        }

        function allowDrop(e) {
            e.preventDefault();
        }

        function drop(ev) {
            //            ev.preventDefault();
            var data = ev.dataTransfer.getData("Text");
            ev.target.appendChild(document.getElementById(data));

        }
       


        function enter(ev) {
            var box = document.getElementById('box');
            box.style.border = '1px solid red';
        }
        function enter1(ev) {
            var box1 = document.getElementById('box1');
            box1.style.border = '1px solid green';
        }
        function leave(e){
            var box = document.getElementById('box');
            box.style.border = '1px solid';
        }
        function leave1(e){
            var box1 = document.getElementById('box1');
            box1.style.border = '1px solid';
        }
    </script>

</html>

图片在两个div框框之间可以来回拖拽