HTML5拖放

最新推荐文章于 2022-10-09 14:47:33 发布

015646

最新推荐文章于 2022-10-09 14:47:33 发布

阅读量293

点赞数

CC 4.0 BY-SA版权

分类专栏： # html5+css3+JavaScript 文章标签： html5

本文链接：https://blog.youkuaiyun.com/u011488769/article/details/46969135

html5+css3+JavaScript 专栏收录该内容

21 篇文章

订阅专栏

本文详细介绍了如何使用HTML5的拖放API实现简单的交互功能，包括定义样式、事件监听和数据传递。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>HTML5拖放</title>
    <style>
        .backdrop{
            width: 400px;
            height: 400px;
            float: left;
        }
        .dropbox{
            width: 50px;
            height: 50px;
            float: left;
        }
        #backdrop{
            background-color: aqua;
        }
        #dropbox{
            background-color: blue;
        }
        #backdrop2{
            background-color: blueviolet;
        }
    </style>
    <script type="text/javascript">
        var backdrop,msg,dropbox,backdrop2;
        window.onload= function () {
            backdrop=document.getElementById("backdrop");
            backdrop2=document.getElementById("backdrop2");
            msg=document.getElementById("msg");
            dropbox=document.getElementById("dropbox");

            backdrop.ondragover=function(e){
                e.preventDefault();
            };
            backdrop2.ondragover=function(e){
                e.preventDefault();
            }
            dropbox.ondragstart=function(e){
                e.dataTransfer.setData("dropboxData","dropbox");
            };

            backdrop.ondrop=dropboxInbackdrop;
            backdrop2.ondrop=dropboxInbackdrop;
        };
        function dropboxInbackdrop(e){
            showObj(e.dataTransfer);
            e.preventDefault();

            var dropbox=document.getElementById(e.dataTransfer.getData("dropboxData"));
            e.target.appendChild(dropbox);
        };

        function showObj(obj){
            var content="";
            for(var k in obj){
                content+=k+":"+obj[k]+"<br/>"
            }
            msg.innerHTML=content;
        }
    </script>
</head>
<body>
   <div id="backdrop" class="backdrop"></div>
   <div id="backdrop2" class="backdrop"></div>
    <div id="dropbox" class="dropbox"></div>
    <div id="msg"></div>
</body>
</html>