使用的时候记得把图片地址改一下
<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
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的,请 点击进行留言回复,万千网友为您解惑!
网友评论