HTML5拖放(drag和drop)

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/xiaguangzhiying/article/details/51728767

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>
阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页