[H5]HTML5拖放

包括HTML中拖放和拖放本地资源。

[index.html]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拖放</title>
    <style>
        #divID1 {
            width: 400px;
            height: 400px;
            background-color: #66CCFF;
            float: left;
        }
        #divID2{
            width: 400px;
            height: 400px;
            background-color: #FF0000;
            float: left;
        }
        #imgID1{
            width: 150px;
            height: 200px;
        }
        #divID10{
            width: 400px;
            height: 400px;
            background-color: aquamarine;
            clear: both;
        }
    </style>
    <script src="indexJS.js"></script>
</head>
<body>
    <!--HTML5拖放-->
        <!--ondragstart: 调用一个函数drag(event)它规定了被拖动的数据-->
        <!--setData():   设置被拖数据的数据类型和值-->
        <!--ondragover:  事件规定在何处放置被拖动的数据-->
        <!--ondrop:      当放置被拖数据时会触发drop事件-->
        <div id="divID1"></div>
        <div id="divID2"></div>
        <img id="imgID1" src="picture/33333.jpg">
        <!--显示拖放日志-->
        <div id="divLogID"></div>

    <!--拖放本地资源-->
        <div id="divID10"></div>
</body>
</html>

[indexJS.js]

var tempDiv1;
var tempDivLog;
var tempImg;
var tempDiv2;
var tempDiv10;

window.onload = function () {
    tempDiv1 = document.getElementById("divID1");
    tempDivLog = document.getElementById("divLogID");
    tempImg = document.getElementById("imgID1");
    tempDiv2 = document.getElementById("divID2");
    tempDiv10 = document.getElementById("divID10");

    // 监听拖入事件
    // tempDiv1.ondragenter = function (ev) {
    //     showDragLogAction(ev);
    // }
    tempDiv1.ondragover = function (ev) {
        // 阻止系统默认事件
        ev.preventDefault();
    }
    tempDiv2.ondragover = function (ev) {
        ev.preventDefault();
    }
    tempDiv10.ondragover = function (ev) {
        ev.preventDefault();
    }

    //监听图片拖动开始事件
    tempImg.ondragstart = function (ev) {
        // 通过dataTransfer可以等到一些操作方法
        // 设置数据
        ev.dataTransfer.setData("newImgID","imgID1"); // 参数一表示新img的ID
    }

    // 拖放页面上资源
    tempDiv1.ondrop = onDropAction;
    tempDiv2.ondrop = onDropAction;
    /*
    // 单个区域拖动
    tempDiv1.ondrop = function (ev) {
            // 通过dataTransfer可以等到一些操作方法
            showDragLogAction(ev.dataTransfer);
            // 阻止系统默认事件
            ev.preventDefault();
            // 获取数据
            var newImg = document.getElementById(ev.dataTransfer.getData("newImgID"));
            tempDiv1.appendChild(newImg);
        }
    }
    */
    // 拖放本地资源
    tempDiv10.ondrop = function (ev) {
        ev.preventDefault();
        // 获取数据
        var newFile = ev.dataTransfer.files[0];
        // FileReader主要用于将文件内容读入内存，通过一系列异步接口，可以在主线程中访问本地文件。
        var fileReader = new FileReader();
        fileReader.onload = function (ev) {
            // showDragLogAction(ev.target);
            tempDiv10.innerHTML = "<img src=\""+fileReader.result+"\" width='150px' height='150px'>"
        }
        fileReader.readAsDataURL(newFile);
    }
}


// 多个区域拖动
function onDropAction (ev) {
    // 通过dataTransfer可以等到一些操作方法
    showDragLogAction(ev.dataTransfer);
    // 阻止系统默认事件
    ev.preventDefault();
    // 获取数据
    var newImg = document.getElementById(ev.dataTransfer.getData("newImgID"));
    // tempDiv1.appendChild(newImg);
    ev.target.appendChild(newImg);
}

// 展示拖放日志
function showDragLogAction (object) {
    var tempString = "";
    for (var i in object) {
        tempString += i + ":"+object[i]+"<br/>";
    }
    tempDivLog.innerHTML = tempString;
}

示意图：

[H5]HTML5拖放

猜你喜欢