小小垃圾桶
程序员文章站
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
上一篇: 炸汤圆的热量有多少?怎么吃汤圆不长胖?
下一篇: 黑枸杞水颜色是什么?