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

Distinguish different droppable elements (jQuery drag & drop)

本文关键字：拖放 元素 jQuery      更新时间：2023-09-26

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

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

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

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

你在寻找这样的东西吗？

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/

相关文章：