Unterscheiden Sie verschiedene absenkbare Elemente (jQuery Drag & Drop)

Question

Ich erstelle einen interaktiven Bildschirm für eine Akademie-Aufgabe, und ich bin im Moment irgendwie fest.

Wir haben 2 dropzones und 3 dropable Elemente. Immer wenn das Droppage-Element a in eine Dropzone gezogen wird, zeigt es jetzt den gleichen Inhalt, wenn das Droppable-Element b gelöscht wird. (Durch das Ablegen wird eine Klasse hinzugefügt, die den ausgeblendeten Inhalt um einen Anzeigeblock erweitert.)

Gibt es eine Möglichkeit, das DropPable-Element zu unterscheiden, sodass wir verschiedene Inhalte mit verschiedenen DropPable-Elementen aufrufen können?

$(function() { 
$("#draggable1").draggable({ revert: true }); 
    $("#draggable2").draggable({ revert: true }); 
    $("#draggable3").draggable({ revert: true }); 

$("#dropzone1").droppable({ 
    drop: function(event, ui) { 
      $(".content").css({display: "block"}); 
      $("#dropzone1").hide(); 
    } 
}); 
$("#dropzone2").droppable({ 
    drop: function(event, ui) { 
      $(".content").css({display: "block"}); 
      $("#dropzone2").hide(); 
    } 
}); 

Answer 1

suchst du so etwas?

https://jsfiddle.net/avq1wkp5/

$("#draggable1").draggable({ revert: true }); 
$("#draggable2").draggable({ revert: true }); 
$("#draggable3").draggable({ revert: true }); 

$("#dropzone1").droppable({ 
    drop: function(event, ui) { 
      $("#content1").show(); 
      $("#content2").hide(); 
    }  
}); 

$("#dropzone2").droppable({ 
    drop: function(event, ui) { 
      $("#content2").show(); 
      $("#content1").hide(); 
    } 
}); 

oder eine verbesserte Version

https://jsfiddle.net/avq1wkp5/1/