HTML5拖放（drag和drop）

最新推荐文章于 2024-01-23 09:00:00 发布

hlinghoney

最新推荐文章于 2024-01-23 09:00:00 发布

阅读量3.1k

点赞数

分类专栏： web前端开发文章标签： html5

本文链接：https://blog.csdn.net/hlinghling/article/details/51728767

版权

web前端开发专栏收录该内容

35 篇文章 0 订阅

订阅专栏

1. 说说“拖放事件”

拖放事件，即抓取对象以后拖动到另一个位置

有些事件在被拖放的元素上触发，有些在放置目标上触发。在拖动元素时，依次触发dragstart事件、drag事件、dragend事件；当某个元素被拖动到一个有效的放置目标上时，依次触发dragenter事件、dragover事件dragleave或者drop事件。

2. 实现过程

设置元素为可拖放

<img draggable="true">

拖动什么？当元素被拖动时，发生的事件（ondragstart和setData()）

ondragstart属性调用一个函数，drag(event)规定看被拖动的数据，dataTransfer.setData()设置被拖放数据的数据类型和值。

function drag(ev){
    ev.dataTransfer.setData("Text",ev.target.id);
}

放在何处？ondragover 事件规定在何处放置被拖动的数据
默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，必须阻止对元素的默认处理方式。因此需要通过ondragover事件中的event.preventDefault()方法

event.preventDefault()

进行放置ondrop
首先调用preventDefault()来避免浏览器对数据的默认处理；然后通过dataTransfer.getData(“Text”)方法获得被拖数据，被拖数据是被拖元素的id;最后把被拖元素追加到放置元素中。

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

源码：
1.实现拖放

//html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拖放</title>
    <style>
        .box{
            width: 400px;
            height: 400px;
        }
        #box1{
            float: left;
            background-color: #cccccc;
        }
        #box2{
            float: left;
            background-color: salmon;
        }
    </style>
    <script src="app.js"></script>
</head>
<body>
    <div id="box1" class="box"></div>
    <div id="box2" class="box"></div>

    <img id="img1" src="1.jpg">
    <div id="msg"></div>
</body>
</html>

//js代码app.js
/**
 * Created by hling on 2015/10/19.
 */
var box1Div,box2Div,msgDiv,img1;
window.onload= function () {
    box1Div=document.getElementById("box1");
    box2Div=document.getElementById("box2");
    msgDiv=document.getElementById("msg");
    img1=document.getElementById("img1");

/*    box1Div.ondragenter= function (e) {
        showObj(e);
    }
}
*/
    box1Div.ondragover=function(e){
        e.preventDefault();
    }


    box2Div.ondragover=function(e){
        e.preventDefault();
    }

    img1.ondragstart= function (e) {
        e.dataTransfer.setData("imgID","img1");
    }

    box1Div.ondrop=dropImghandler;
    box2Div.ondrop=dropImghandler;
}

function dropImghandler(e){

        showObj(e.dataTransfer);
        e.preventDefault();
        //创建节点
        var img=document.getElementById(e.dataTransfer.getData("imgID"));
        e.target.appendChild(img);
}

function showObj(obj){
    var s="";
    for(var k in obj){
        s+=k+":"+obj[k]+"<br/>"
    }
    msgDiv.innerHTML=s;

}

2.实现两个< div>元素之间拖放图像

<!DOCTYPE html>
<html>
    <head>
        <title>拖拽</title>
        <style type="text/css">
            .div{
                float: left;
                width: 100px;
                height: 35px;
                margin: 10px;
                padding: 10px;
                border: 1px solid #aaaaaa;
            }
        </style>
        <script type="text/javascript">
            function allowDrop(ev){
                ev.preventDefault();

            }

            function drag(ev){
                ev.dataTransfer.setData("Text",ev.target.id);
            }

            function drop(ev){
                ev.preventDefault();
                var data=ev.dataTransfer.getData("Text");
                ev.target.appendChild(document.getElementById(data));
            }
        </script>
    </head>
    <body>
        <div id="div1" class="div" ondrop="drop(event)" ondragover="allowDrop(event)">
            <img src="1.jpg" draggable="true" ondragstart="drag(event)" id="drag1" width="80" height="30">  
        </div>
        <div id="div2" class="div" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    </body>
</html>

hlinghoney

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
HTML5拖放（drag和drop）

1. 说说“拖放事件” 拖放事件，即抓取对象以后拖动到另一个位置有些事件在被拖放的元素上触发，有些在放置目标上触发。在拖动元素时，依次触发dragstart事件、drag事件、dragend事件；当某个元素被拖动到一个有效的放置目标上时，依次触发dragenter事件、dragover事件dragleave或者drop事件。2. 实现过程设置元素为可拖放<img draggab
复制链接

扫一扫