欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

小小垃圾桶

程序员文章站 2022-03-23 12:19:55
拖拽实现一个小垃圾桶...
使用的时候记得把图片地址改一下
    <div>
        <p>源文件</p>
        <img src="158595@1593580230@2.png" alt="" class="myimg">
    </div>
    <div>
        <p>目标文件</p>
    </div>
    <script>
        var myimg = document.getElementsByClassName("myimg")[0];
        var div = document.getElementsByTagName("div");
        div[0].ondragenter = function(e){
			e.preventDefault()
		}
		div[0].ondragover = function(e){
			e.preventDefault()
		}
		div[0].ondragleave = function(e){
			e.preventDefault()
		}
        div[1].ondragenter = function(e){
			e.preventDefault()
		}
		div[1].ondragover = function(e){
			e.preventDefault()
		}
		div[1].ondragleave = function(e){
			e.preventDefault()
		}
        myimg.ondragstart = function(e){
            var mysrc = myimg.src;
            e.dataTransfer.setData("text",mysrc);
        }
        div[0].ondrop = function(e){
            e.preventDefault();
            var myimg1 = document.getElementsByClassName("myimg1")[0];
            var mysrc = e.dataTransfer.getData("text");
            if(myimg1.classList == "myimg1"){
                div[0].innerHTML+="<img src='"+mysrc+"' class='myimg'>"
                div[1].removeChild(myimg1);
            }
        }
        div[1].ondrop = function(e){
            e.preventDefault();
            var myimg = document.getElementsByClassName("myimg")[0];
            var mysrc = e.dataTransfer.getData("text");
            if(myimg.classList == "myimg"){
                div[1].innerHTML+="<img src='"+mysrc+"' class='myimg1'>";
                div[0].removeChild(myimg);
            }
        }
    </script>

本文地址:https://blog.csdn.net/ttttqqqqq/article/details/107354873

相关标签: js