当前位置: 移动技术网 > IT编程>开发语言>其他编程 > 小小垃圾桶

小小垃圾桶

2020年07月24日  | 移动技术网IT编程  | 我要评论
拖拽实现一个小垃圾桶
使用的时候记得把图片地址改一下
    <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

如您对本文有疑问或者有任何想说的,请 点击进行留言回复,万千网友为您解惑!

相关文章:

验证码:
移动技术网