使用H5拖放事件来写一个小程序

来源：互联网发布：淘宝跟天猫的区别编辑：程序博客网时间：2024/05/18 00:39

1.所有的元素都有一个draggable属性，用于指定是否启动该元素的拖放功能，而/两个元素默认启动拖放

<div draggable="true">    innerHTML</div>

2.拖放操作相关的事件:

被拖动的元素的事件:    1.ondragstart：开始拖动时触发    2.ondrag：拖动过程中持续触发    3.ondragend：拖动结束时触发拖动时鼠标经过的元素的事件:    1.ondragenter：刚开始进入该元素的范围时触发    2.ondragover：经过该元素范围时持续触发    3.onleave：离开该元素范围时触发    4.ondrop：被拖动元素放到了该元素上时触发

小提示：如果想让拖动放下之后不使用浏览器默认行为，也就是打开一个新的页面，可以指定ondragover事件:return false ;

3.DataTransfer对象，拖放事件触发的拖放事件event有一个dataTransfer属性，该属性值是一个DataTransfer对象，该对象包含如下常用的属性和方法：

1.setDragImage(ele,x,y)：设置拖放操作的自定义图标，ele表示自定义图标，x和y分别表示图标和鼠标在水平和竖直方向的距离2.getData(format)：获取对象中指定format格式的数据3.setData(format,date)：想对象中设置format格式的数据data4.clearData([format])：清除对象中format格式的数据或者所有数据

下面来使用拖放事件来完成一个简单的程序，实现的功能为：拖到收藏栏则copy，拖到回收站则delete

<!Doctype HTML><html>    <head>        <title>H5拖放项目</title>        <meta http-equiv="content-Type" content="text/html;charset=utf-8" />        <style>            #list{                width:700px ;                height: 150px ;                border: 3px solid green ;                margin-bottom: 20px ;            }            #copy{                width: 300px ;                height: 150px ;                border: 3px solid green ;                float: left ;                margin-right: 20px ;            }            #can{                width: 300px ;                height: 150px ;                border: 3px solid green ;                float: left ;            }        </style>        <script>            window.onload = function() {                var java = document.getElementById("java") ;                var ajax = document.getElementById("ajax") ;                var ee = document.getElementById("ee") ;                var web = document.getElementById("web") ;                var copy = document.getElementById("copy") ;                var can = document.getElementById("can") ;                //取消事件的默认行为                document.ondragover = function(event) {                    return false ;                };                //取消收藏栏和回收站之外的其他drop事件默认行为                document.ondrop = function(event) {                    return false ;                } ;                //设置开始拖动事件                java.ondragstart = function(event){                    event.dataTransfer.setData("text/plain","<item>" + event.target.innerHTML) ;                } ;                ajax.ondragstart = function(event){                    event.dataTransfer.setData("text/plain","<item>" + event.target.innerHTML) ;                } ;                ee.ondragstart = function(event){                    event.dataTransfer.setData("text/plain","<item>" + event.target.innerHTML) ;                } ;                web.ondragstart = function(event){                    event.dataTransfer.setData("text/plain","<item>" + event.target.innerHTML) ;                } ;                //设置收藏栏的放下收藏事件                copy.ondrop = function(event) {                    var data = event.dataTransfer.getData("text/plain") ;                    if(data.indexOf("<item>") == 0) {                        var ele = document.createElement("div") ;                        ele.id = new Date().getUTCMilliseconds() ;                        ele.innerHTML = data.substring(6) ;                        ele.draggable = "true" ;                        ele.ondragstart = function(event) {                            event.dataTransfer.setData("text/plain","<remove>" + ele.id) ;                        } ;                        copy.appendChild(ele) ;                    }                 };                //设置回收站的删除drop事件                can.ondrop = function(event) {                    var data = event.dataTransfer.getData("text/plain") ;                    if(data.indexOf("<remove>") == 0) {                        var target = document.getElementById(data.substring(8)) ;                        copy.removeChild(target) ;                    }                }            };        </script>    </head>    <body>        <div id="list">            <h2>项目列表</h2>            <div id="java" draggable="true">疯狂java</div>            <div id="ajax" draggable="true">疯狂Ajax</div>            <div id="ee" draggable="true">轻量级企业应用实战</div>            <div id="web" draggable="true">WEB整合开发</div>        </div>        <div id="copy">            <h2>收藏栏</h2>        </div>        <div id="can">            <h2>回收站</h2>        </div>    </body></html>

0 0