Question

尝试只有一个项目的放置区域。项目从sortable1 ul拖到droppable ul，如果放置区域中已有项目，则必须首先将其移动到sortable2 ul，不能将li移动到sortable2。所有李都将包含一张桌子，他们必须保留他们的ID。

http://jsfiddle.net/qLS4s/6/

$("#drop_zone").droppable({
accept: ".connectedSortable li",
hoverClass: "ui-state-hover",
drop: function (ev, ui) {
  var drop_id = String('#').concat(jQuery(ui.helper).attr("id"));

  $("#drop_zone li").each(function(index, item) {
  var drop_zone_id = jQuery(item).attr("id");
  if (typeof(drop_zone_li_id) != "undefined")
  {
    if (drop_zone_li_id != '' && drop_zone_li_id != drop_id)
    {
      $(drop_zone_li_id).appendTo('#sortable2'); // This should move item but doesn't
    }  
  }    
  });

  $("<li></li>").html(ui.draggable.html()).appendTo(this);
  ui.draggable.remove();
}

}）;

Answer 1

所有这些字符串/ id操作都相当混乱，完全没必要。你过度复杂了：你可以简单.appendTo(otherParent) drop事件中的所有孩子（特别是因为你拒绝所有自然滴并手动重新创建每个元素）。所有你需要的是这样的：

$("#drop_zone li").appendTo('#sortable2');

以下是更新示例：http://jsfiddle.net/z9Ad9/

Jquery可排序/可放置，限制为一个项目

1 个答案: