HTML5学习笔记之拖放

最新推荐文章于 2024-05-01 23:43:22 发布

zhxiong1994

最新推荐文章于 2024-05-01 23:43:22 发布

阅读量424

点赞数

文章标签： html5 拖放

本文链接：https://blog.csdn.net/zhxiong1994/article/details/49173707

版权

HTML5学习笔记之拖放

对于HTML5，拖放是一个标准的一部分，任何元素都是可以被拖放的。

HTML5的拖放功能是通过JS来实现的，在通过对标签元素的获取，在JS中通过对需要拖放的位置调用函数ondragover，禁止浏览器的默认事件，设置被拖放元素的id，调用函数实现拖放。

<span style="white-space: pre;"></span><pre name="code" class="html">//demo01.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拖放</title>
    <style>
        .box{
            width: 400px;
            height: 400px;
        }
        #div01{
            float: left;
            background-color: aquamarine;
        }
        #div02 {
            float: left;
            background-color: deeppink;
        }
    </style>
    <script src="Demo01.js"></script>
</head>
<body>
    <div id="div01" class="box"></div>
    <div id="div02" class="box"></div>
    <img src="img01.jpg" id="img01">
    <div id="msg" style="clear: both;"></div>
</body>
</html>

相关JS代码：

<pre name="code" class="javascript">//demo01.js

var div01,msgDiv,img01;

window.onload = function(){
    div01 = document.getElementById("div01");
    div02 = document.getElementById("div02");
    msgDiv = document.getElementById("msg");
    img01 = document.getElementById("img01");

    div01.ondragover = function(e){
        e.preventDefault();
    }

    div02.ondragover = function(e){
        e.preventDefault();
    }

    img01.ondragstart = function(e){
        e.dataTransfer.setData("imgId","img01");
    }

    div01.ondrop = dropImghandler;
    div02.ondrop = dropImghandler;

}

function dropImghandler(e){
    showObj(e);
    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;
}

浏览器执行结果：

zhxiong1994

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5学习笔记之拖放

HTML5学习笔记之拖放对于HTML5，拖放是一个标准的一部分，任何元素都是可以被拖放的。HTML5的拖放功能是通过JS来实现的，在通过对标签元素的获取，在JS中通过对需要拖放的位置调用函数ondragover，禁止浏览器的默认事件，设置被拖放元素的id，调用函数实现拖放。//demo01.html 拖放 .box{
复制链接

扫一扫