html5中的拖拽行为

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <style>
        #div1{
            border:1px green solid;
            width: 300px;
            height:250px;
        }
        #div2{
            border:1px red solid;
            width: 200px;
            height:100px;
        }



    </style>
</head>
<body>


<!--
放在何处-ondragover ondragover规定被拖动的数据放置在何处。
默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式，
在这里，调用 preventDefault() 来避免浏览器对数据的默认处理。
意思就是   当设置了ondragover这个属性调用了一个函数  并且说明这个div1是可以被放置元素的

ondrap 这个是进行放置的
-->

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">

</div>


<!--这个div2是被拖动的元素  ondragstart这个属性会调用一个函数
这个函数定义了被拖动的数据，dataTransfer.setData()方法设置了
被拖数据的数据类型和值，数据类型可自己设置（即下面代码中的“Text”）。值即被拖数据的id，所以拖动元素和被放置
元素均需设置id。   这里面就是保存了div的id  div2  和div中内容的类型   文本
-->
<div id="div2" draggable="true" ondragstart="drag(event)">
    你好
</div>
</body>
<script>

    /*拖拽分为三个行为
    * 1，要记录要拖拽的元素和内容  ondragstart 这个属性  后面需要有个函数处理
    *
    * 2、目标对象需要修改浏览器的默认行为  ondragover
    *
    * 3、ondrap  拖拽行为  处理函数需要获取到可拖拽的内容  然后添加到当前的元素中
    * */
    function allowDrop(ev){
        /*允许放置   避免浏览器默认的处理*/
        ev.preventDefault();
    }
    function drag(ev){
        /*记录了div2的id和放置的内容类型*/
        ev.dataTransfer.setData("text",ev.target.id);
    }
    function drop(ev){
        var data=ev.dataTransfer.getData("text");
        ev.target.appendChild(document.getElementById(data));
    }
</script>
</html>
html5中的拖拽行为

猜你喜欢
