html5实现本页面元素拖放和本地文件拖放

时间：2024-03-09 21:55:20
HTML5拖放
拖放本地数据
 
1.HTML拖放
拖放（Drag 和 Drop）是HTML5标准的组成部分
2.拖放开始：
ondragStart:调用了一个函数，drag(event),它规定了被拖动的数据
3.设置拖动数据：
setDate():设置被拖动数据的数据类型和值
4.放入位置：
ondragover:事件规定在何处放置被拖动的数据
5.放置：
ondrop：当放置被拖数据时，或发生drop事件
 
html5实现本页面元素拖放
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>拖放本页面数据</title>
        <style>
            .box {
                width: 400px;
                height: 400px;
            }
            
            #box2 {
                float: left;
                background-color:black;
            }
            #box1 {
                float: left;
                background-color: #cccccc;
            }
        </style>
    </head>

    <body>
        <div id="box1" class="box"></div>
        <div id="box2" class="box"></div>
        <img id="img1" src="img/xk.png" width="100px" height="100px" />
        <div id="msg"></div>
        <script>
            var box1Div,box2Div, msgDiv, imgDiv1;
            window.onload = function() {
                box1Div = document.getElementById("box1");
                box2Div = document.getElementById("box2");
                msgDiv = document.getElementById("msg");
                imgDiv1 = document.getElementById("img1");
                /*box1Div.ondragenter = function(e){//当拖曳元素进入目标元素的时候触发的事件，此事件作用在目标元素上
                    showObj(e);
                }*/
                box1Div.ondragover = function(e) { //拖拽元素在目标元素上移动的时候触发的事件，此事件作用在目标元素上
                    e.preventDefault();
                }
                
                box2Div.ondragover = function(e) { //拖拽元素在目标元素上移动的时候触发的事件，此事件作用在目标元素上
                    e.preventDefault();
                }

                imgDiv1.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;
            }
        </script>
    </body>

</html>

页面元素拖放效果：

html5实现本地文件拖放

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>拖放本地数据</title>
        <style>
            #imgContainer{
                background-color: #CCCCCC;
                width: 500px;
                height: 500px;
            }
        </style>
    </head>

    <body>
        <div id="imgContainer"></div>
        <div id="msg"></div>
        <script>
            var imgContainer;
            var msgDiv;
            window.onload = function(){
                imgContainer = document.getElementById("imgContainer");
                msgDiv = document.getElementById("msg");
                imgContainer.ondragover = function(e){
                    e.preventDefault();
                }
                imgContainer.ondrop = function(e){
                    e.preventDefault();
                    var fileObj = e.dataTransfer.files[0];
                    var fileReader = new FileReader();
                    fileReader.onload = function(e){
                        showObj(e.target);
                        imgContainer.innerHTML = "<img src=\'"+e.target.result+"\' width=\'100px\' height=\'100px\' />"
                    }
                    fileReader.readAsDataURL(fileObj);
                }
            }
            function showObj(obj) {
                var s = "";
                for(var k in obj) {
                    s += k + ":" + obj[k] + "<br/>";
                }
                msgDiv.innerHTML = s;
            }
        </script>
    </body>

</html>

本地文件拖放效果：

相关文章