Question

我正在尝试创建一个舞台。我在可拖动的div中有5个项目。克隆将被拖到20个可放置的区域。

我创建了20个具有不同ID的div。意味着多个可落下的区域。

问题在于，我不知道如何获取物品被丢弃的div的ID以及如何，我将仅在该div中显示该产品。现在它在一个第一个div中显示所有项目。

主要问题是我们如何动态创建多个可投放区域并将项目放在该特定区域。

先谢谢

Answer 1

jQuery-UI Draggable Droppable事件处理程序

您需要从传递给drop方法的事件参数中获取droppable dom对象。

$( ".selector" ).droppable({
  drop: function(event, ui) { 
    // $(this) represents the droppable.
    alert($(this).attr("id"));
  }
});

可拖动对象可以通过ui.draggable引用。其中大部分来自于at the jQuery-ui Website

的jQuery-UI文档

将Droppable添加到动态添加的元素

如果元素（让我们称之为阶段目标）被动态添加到“阶段”，那么您可能希望在创建它们时对这些元素调用droppable方法。

function makeStageTargets(i) {
  for(i;i--;true){
    var d = $("div").attr("id","item_"+i); // this will make a div id item_i
    $("stage").append(d);
    d.droppable(
      drop:function(e, ui){
        var param = $(ui.draggable).attr('src');
        $("stage").remove(ui.draggable); // this will remove an item when dropped
        addlist(param);
      });
  }
}
makeStageTargets(60);

如果我错过了你的问题的精神，请告知。

Answer 2

以下是我正在使用的代码

$（ “div_item”）。可投放（{

        drop:
            function(e, ui)
                {
                    var param = $(ui.draggable).attr('src');

                    addlist(param);
                }

});

其中addlist（）是一个获取ajax内容并在div中显示的函数 $（ '＃div_item'）附加（msg.txt）;

'msg'变量用于从ajax文件中获取项目详细信息。

问题在于id div_item。这些超过20，colud高达60.我也想限制每个div一个单一的下降。非常感谢您的帮助

Jquery拖放阶段

2 个答案: