HTML5   发布时间:2022-04-25  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了html5之拖放效果 (drag and drop)大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

html部分

<!DOCTYPE html>
<html>
<head>
<Meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="app.js"></script>
<style type="text/css">
    .Box{
        width: 300px;
        height: 300px;
        float: left;
    }
    #Box1{
        BACkground-color: blue;
        
    }
    #Box2{
        BACkground-color: red;
        
    }

</style>

</head>

<body>

    <div class='Box' id="Box1"></div>
    <div class='Box' id="Box2"></div>
    <img id="img1" src="psb.jpg" width="100px;" height="100px;">
</body>
</html>



js部分

var Box1,Box2,img1; window.onload = function(){          Box1 = document.getElementById("Box1");     Box2 = document.getElementById("Box2");     img1 = document.getElementById("img1");          //阻止认的事件     Box1.ondragover = function(E){         e.preventDefault();     }     Box2.ondragover = function(E){         e.preventDefault();     }          img1.ondragstart = function(E){         e.dataTransfer.setData("imgid","img1");              }     Box1.ondrop=droImghandler;     Box2.ondrop=droImghandler; } function droImghandler(E){     var img = document.getElementById(e.dataTransfer.getData("imgid"));     e.target.appendChild(img);      }

大佬总结

以上是大佬教程为你收集整理的html5之拖放效果 (drag and drop)全部内容,希望文章能够帮你解决html5之拖放效果 (drag and drop)所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。