HTML5之拖拽 - foreverwaiting

HTML5拖放

拖放（Drag和drop）是H5标准的组成部分

此处需具备js基础知识及其H5拖拽部分相关方法

 在拖动目标上触发事件 (源元素):
        ondragstart - 用户开始拖动元素时触发
        ondrag - 元素正在拖动时触发
        ondragend - 用户完成元素拖动后触发
 释放目标时触发的事件:
        ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
        ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
        ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
        ondrop - 在一个拖动过程中，释放鼠标键时触发此事件

下面来看几个例子

第一：本地拖放

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<style type="text/css">
    #boxContainer{
        background-color: #BC8F8F;
        width: 600px;
        height: 400px;
    }
</style>
<body>
<div id="boxContainer"></div>
<div id="msg"></div>
<script>
    var imgContainer,msgDiv;
window.onload=function(){
    imgContainer=document.getElementById("boxContainer");
    msgDiv=document.getElementById("msg");
    imgContainer.ondragover=function(e){
        e.preventDefault();//阻止事件event默认行为
    };
    imgContainer.ondrop=function(e){//通过showObj函数显示信息知道本地图片拖拽与file信息有关
        e.preventDefault();
        var f=e.dataTransfer.files[0];//获取信息
        var fileReader=new FileReader();//读取信息
        fileReader.onload=function(e){//通过fileReader监听事件
            showObj(e.target);
            imgContainer.innerHTML="<img src=\""+fileReader.result+"\">"
        };
        fileReader.readAsDataURL(f);//读取地址
    }
};
function showObj(obj){//这个函数只是为了表达在拖放成功后取显示去盛放拖拽造成的数据信息
    var s="";//声明局部变量
    for(var k in obj){//用forin循环遍历数据信息
        s+=k+":"+obj[k]+"<br/>"
    }
    msgDiv.innerHTML=s;//显示信息在HTML
}
</script>    
</body>
</html>

第二：H5拖放

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<style type="text/css">
    .box{
        width:400px;
        height:300px;
    }
    #box1{
        float: left;
        background-color: orange;
    }
    #box2{
        float: left;
        background-color: rosybrown;
    }
</style>
<body>
<div id="box1" class="box"></div>
<div id="box2" class="box"></div>
<img id="img1" src="images/demo.jpg" width="200" height="200"/>
<div id="msg"></div>
<script>
       var box1Div,box2Div,msgDiv,img1;//声明全局变量
window.onload=function(){
    box1Div=document.getElementById("box1");//获取放置拖拽元素的div
    box2Div=document.getElementById("box2");
    msgDiv=document.getElementById("msg");//获取显示拖拽信息的元素的div
    img1=document.getElementById("img1");
    
    box1Div.ondragenter=function(e){//给其添加ondragenter即当被鼠标拖动的对象进入其容器范围内时触发此事件，即给拖拽加监听事件        showObj(e);//e为event事件为事件参数   }
    box1Div.ondragover=function(e){
        e.preventDefault();//阻止事件event默认行为
    };
    box2Div.ondragover=function(e){//ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
        e.preventDefault();//阻止事件event默认行为，调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
    };
    img1.ondragstart=function(e){//ondragstart - 用户开始拖动元素时触发
        e.dataTransfer.setData("imgId","img1");//用setData方法获取数据
    };
    box1Div.ondrop=dropImghand;
    box2Div.ondrop=dropImghand;//ondrop - 在一个拖动过程中，释放鼠标键时触发此事件
};
function dropImghand(e){//box1Div.ondrop=后拿出来设置函数名，即封装成方法，再在上面引用
    showObj(e.dataTransfer);
    e.preventDefault();//阻止事件event默认行为
    //创建节点，放置数据
    var img=document.getElementById(e.dataTransfer.getData("imgId"));
    e.target.appendChild(img);//添加到节点当中
}
function showObj(obj){//这个函数只是为了表达在拖放成功后取显示去盛放拖拽造成的数据信息
    var s="";//声明局部变量
    for(var k in obj){//用forin循环遍历数据信息
        s+=k+":"+obj[k]+"<br/>"
    }
    msgDiv.innerHTML=s;//显示信息在HTML
}

</script>
</body>
</html>

posted on 2018-05-23 20:26 foreverwaiting 阅读(354) 评论(0) 收藏举报