Question

我正在为学院作业创建一个交互式屏幕，而且我现在已经陷入困境。

我们有2个dropzones和3个droppable元素。每当可投放元素a被拖动到dropzone时，它现在在删除droppable元素b时显示相同的内容。（删除它会添加一个类，将显示块添加到隐藏的内容中以显示）

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

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

区分不同的可放置元素（jQuery拖放）

1 个答案: