我有一个包含 6 个图像的 html 文档。使用javascript我使用拖放移动那些img。然后，当 2 个图像重叠时，它们应该消失并且应该创建另一个图像并且应该出现而不是那些 2 个重叠。当屏幕上只剩下一个图像或没有图像时，它结束。我应该怎么做？
这是我到目前为止所拥有的，它只允许我拖放图片:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Drag and drop</title>
<style type="text/css">
.dragme {
position:relative;
width: 270px;
height: 203px;
cursor: move;
}
#draggable {
background-color: #ccc;
border: 1px solid #000;
}
</style>
<script type="text/javascript">
function startDrag(e) {
// determine event object
if (!e) {
var e = window.event;
}
// IE uses srcElement, others use target
var targ = e.target ? e.target : e.srcElement;
if (targ.className != 'dragme') {return};
// calculate event X, Y coordinates
offsetX = e.clientX;
offsetY = e.clientY;
// assign default values for top and left properties
if(!targ.style.left) { targ.style.left='0px'};
if (!targ.style.top) { targ.style.top='0px'};
// calculate integer values for top and left
// properties
coordX = parseInt(targ.style.left);
coordY = parseInt(targ.style.top);
drag = true;
// move div element
document.onmousemove=dragDiv;
}
function dragDiv(e) {
if (!drag) {return};
if (!e) { var e= window.event};
var targ=e.target?e.target:e.srcElement;
// move div element
targ.style.left=coordX+e.clientX-offsetX+'px';
targ.style.top=coordY+e.clientY-offsetY+'px';
return false;
}
function stopDrag() {
drag=false;
}
window.onload = function() {
document.onmousedown = startDrag;
document.onmouseup = stopDrag;
}
</script>
<body>
<img src="pic1.jpg" alt="Mountain View" style="width:304px;height:228px;" title="drag-and-drop image script" class="dragme">
<img src="pic2.jpg" alt="Mountain View" style="width:304px;height:228px;" title="drag-and-drop image script" class="dragme">
<img src="pic3.jpg" alt="Mountain View" style="width:304px;height:228px;" title="drag-and-drop image script" class="dragme">
<img src="pic4.jpg" alt="Mountain View" style="width:304px;height:228px;" title="drag-and-drop image script" class="dragme">
<img src="land.jpg" alt="Mountain View" style="width:304px;height:228px;" title="drag-and-drop image script" class="dragme">
<img src="pic6.jpg" alt="Mountain View" style="width:304px;height:228px;" title="drag-and-drop image script" class="dragme">
</body>
</html>
最佳答案
我可能会尝试使用 JQuery，它会为您完成大部分艰苦的工作。
参见:https://jqueryui.com/draggable/
和:https://jqueryui.com/droppable/
下面是关于我将如何解决您的问题的粗略概述...当将图像拖到另一个图像上时，它会使图像消失，但不会出现新图像。
希望这会为您指明正确的方向...
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Draggable - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<style>
.draggable { width: 150px; height: 150px; padding: 0.5em; }
.draggableImg { width: 150px; height: 150px;}
.hiddenImage {display:none;}
body {font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";
font-size: 62.5%;}
</style>
<script>
$(function() {
$( ".draggable" ).draggable();
$( ".droppable" ).droppable({
drop: function( event, ui ) {
$(this)
.addClass("hiddenImage")
}
});
});
</script>
</head>
<body>
<div class="ui-widget-content draggable droppable">
<img src="pic1.jpg" alt="Mountain View" title="drag-and-drop image script" class="draggableImg"/>
</div>
<div class="ui-widget-content draggable droppable">
<img src="pic2.jpg" alt="Mountain View" title="drag-and-drop image script" class="draggableImg"/>
</div>
<div class="ui-widget-content draggable droppable">
<img src="pic3.jpg" alt="Mountain View" title="drag-and-drop image script" class="draggableImg"/>
</div>
<div class="ui-widget-content draggable droppable">
<img src="pic4.jpg" alt="Mountain View" title="drag-and-drop image script" class="draggableImg"/>
</div>
<div class="ui-widget-content draggable droppable">
<img src="land.jpg" alt="Mountain View" title="drag-and-drop image script" class="draggableImg"/>
</div>
<div class="ui-widget-content draggable droppable">
<img src="pic6.jpg" alt="Mountain View" title="drag-and-drop image script" class="draggableImg"/>
</div>
</body>
</html>
关于javascript - 如何使图像重叠时消失？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37674027/