Jquery 拖放阶段答案

【问题标题】：Jquery Drag n Drop StageJquery 拖放阶段
【发布时间】：2010-08-08 17:59:43
【问题描述】：

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

我创建了 20 盒具有不同 id 的 div。表示多个可放置区域。

问题是我不知道如何获取删除项目的 div 的 id 以及如何仅在该 div 中显示该产品。现在它在一个第一个 div 中显示所有项目。

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

提前致谢

【问题讨论】：

欢迎来到 StackOverflow。您可能希望在您的问题中包含一些代码，以澄清有关您如何实施的任何问题。

标签： jquery jquery-ui jquery-plugins

【解决方案1】：

jQuery-UI Draggable Droppable 事件处理程序

您需要从传递给 drop 方法的事件参数中获取可放置的 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);

如果我错过了您的问题的精神，请提出建议。

【讨论】：

感谢加布里埃尔的回复。但问题是，$(".selector") 中的选择器部分从何而来。我有多个多个 div，有 20 个动态生成，id 像 item_1、item_2 .. 等。现在我的项目被放入，我将如何动态更改它。再次感谢您的帮助。
我认为我们的方向是正确的，但是总共有 5 个项目，它们可以被多次丢弃，这意味着该项目的克隆将被丢弃在那里，还有一件事是限制用户在可放置区域中放置单个项目。非常感谢加布里埃尔。我想了很多天，现在我在你的帮助下得到了一些线索。

【解决方案2】：

这是我正在使用的代码

$("div_item").droppable({

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

                    addlist(param);
                }

});

其中 addlist() 是一个获取 ajax 内容并显示在 div 中的函数 $('#div_item').append(msg.txt);

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

问题在于 id div_item。这些超过 20 个，最多可达 60 个。我还想限制每个 div 只放入一个。非常感谢您的帮助

【讨论】：

通常的想法是使用新的相关信息编辑问题。应保留答案帖子以获取答案。我已经更新了我的答案，以回答我认为您的问题。尽管为了清楚起见，您的问题是：如何动态向页面添加元素？如何使该元素可放置？如何使掉落在其上的物品只能掉落一次？我试图在我的回答中解决这些问题。