Wie können Bilder verschwinden, wenn sie sich überlappen?

Ich habe ein HTML-Dokument mit 6 Bildern. mit Javascript verschiebe ich diese img mit Drag & Drop. Wenn sich dann zwei Bilder überlappen, sollten sie verschwinden und ein anderes Bild sollte erstellt werden und sollte anstelle dieser zwei überlappenden Bilder erscheinen. Es endet, wenn nur noch ein oder kein Bild auf dem Bildschirm vorhanden ist. Wie soll ich das machen?Wie können Bilder verschwinden, wenn sie sich überlappen?

Dies ist, was ich bis jetzt haben, erlaubt es mir nur Bilder per Drag & Drop:

<!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>

Quelle

2016-06-07 AndrB

ich wahrscheinlich diese JQuery eine geben würde gehen mit, tut es die meisten der harten Arbeit für Sie.

See: https://jqueryui.com/draggable/

und: https://jqueryui.com/droppable/

Nachfolgend finden Sie eine grobe Skizze, wie ich das Problem angehen würde ... es wird ein Bild verschwinden, wenn es über ein anderes Bild gezogen wird, aber es macht nicht einen neuen erscheinen.

hoffentlich in die richtige Richtung wird dies allerdings zeigen ...

<!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>

Quelle

2016-06-07 09:46:49

Es hilft viel. Ich danke dir sehr. – AndrB

Wie können Bilder verschwinden, wenn sie sich überlappen?

Antwort

Verwandte Themen