gpt4 book ai didi

javascript - 当我将一张图片拖放到另一张图片上时,为什么它会消失?

转载 作者:行者123 更新时间:2023-11-30 16:54:37 24 4
gpt4 key购买 nike

我正在向多个图像添加一个拖动事件,这允许将它们从一个 block 拖到另一个 block 并返回。代码运行良好,除了一个小故障。每当我拖动一个图像并将其放在任何其他图像之上时,它就会消失。有人可以解释为什么会这样,我怎样才能阻止它发生?我在这里包括代码。这也是它的 jsfiddle - https://jsfiddle.net/Ljmqyz1h/1/

<html>
<head>
<style>
div {
float: left;
width: 500px;
height: 500px;
padding: 10px;
border: 1px solid black;
}
#div2 {
margin-left: 50px;
}
img {
width: 200px;
height: 200px;
}
</style>
<script>
function allowDrop(event) {
event.preventDefault();
}
function drag(event, id) {
var img1 = document.getElementById(id);
event.dataTransfer.setData("osaicon", img1.id);
img1.style.opacity = 0;
}
function drop(event) {
var data = event.dataTransfer.getData("osaicon");
event.target.appendChild(document.getElementById(data));
}
function show(id) {
var img1 = document.getElementById(id);
img1.style.opacity = 1;
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<img id="logo" src="osahub-icon.png" draggable="true" ondragstart="drag(event, this.id)" ondragend="show(this.id)">
<img id="blue" src="Red_ball.png" draggable="true" ondragstart="drag(event, this.id)" ondragend="show(this.id)">
<img id="red" src="Blue_ball.png" draggable="true" ondragstart="drag(event, this.id)" ondragend="show(this.id)">
<img id="button" src="button.gif" draggable="true" ondragstart="drag(event, this.id)" ondragend="show(this.id)">
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
</div>
</body>

最佳答案

在您的代码中,您只需要测试将放置图像的目标是否不是图像。

if ( event.target.nodeName !== "IMG" ) {
event.target.appendChild(document.getElementById(data));
}

演示:https://jsfiddle.net/Ljmqyz1h/3/

关于javascript - 当我将一张图片拖放到另一张图片上时,为什么它会消失?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29923776/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com