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

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格式的数据data
4.clearData([format]):清除对象中format格式的数据或者所有数据

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


<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","" + event.target.innerHTML) ;
                } ;
                ajax.ondragstart = function(event){
                    event.dataTransfer.setData("text/plain","" + event.target.innerHTML) ;
                } ;
                ee.ondragstart = function(event){
                    event.dataTransfer.setData("text/plain","" + event.target.innerHTML) ;
                } ;
                web.ondragstart = function(event){
                    event.dataTransfer.setData("text/plain","" + event.target.innerHTML) ;
                } ;
                //设置收藏栏的放下收藏事件
                copy.ondrop = function(event) {
                    var data = event.dataTransfer.getData("text/plain") ;
                    if(data.indexOf("") == 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","" + ele.id) ;
                        } ;
                        copy.appendChild(ele) ;
                    } 
                };
                //设置回收站的删除drop事件
                can.ondrop = function(event) {
                    var data = event.dataTransfer.getData("text/plain") ;
                    if(data.indexOf("") == 0) {
                        var target = document.getElementById(data.substring(8)) ;
                        copy.removeChild(target) ;
                    }
                }
            };
        script>
    head>
    <body>
        <div id="list">
            <h2>项目列表h2>
            <div id="java" draggable="true">疯狂javadiv>
            <div id="ajax" draggable="true">疯狂Ajaxdiv>
            <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>

你可能感兴趣的:(html5+css3)