javascript - 区分不同的可放置元素(jQuery 拖放)

Question

我正在为学院作业创建一个交互式屏幕，但我现在有点卡住了。

我们有 2 个放置区和 3 个可放置元素。每当将可放置元素 a 拖动到放置区时，它现在会在放置可放置元素 b 时显示相同的内容。 (删除它会添加一个类，该类将显示 block 添加到要显示的隐藏内容中)

有没有办法区分可放置元素，以便我们可以弹出链接到不同可放置元素的不同内容？

$(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

你在找这样的东西吗？

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();
  }
});

或改进的版本

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