Question

我正在寻找帮助，请使用jQuery draggable和droppable在已删除的容器中获取id。我只有两个带有listitems的UL，我从列表1拖到列表2.我需要获取列表2中已删除项目上方项目的id。

它没有得到$(this).attr("id")，因为根据基本的jQuery示例，两个列表都被标记为可排序。我想这样做的原因是每个列表项都有一个订单，当我删除一个项目时，我想在它上面的一个和下面的一个之间设置顺序，这样当从数据库重新加载时它按顺序显示该项目被放入。因此，如果我得到上面的项目，我将能够获得要添加的订单。

没有包含代码，因为它与从一个列表拖动到另一个列表的标准jQuery示例代码相同。

任何帮助将不胜感激

以下是放置点的代码

 $("#sortable1").sortable({
        dropOnEmpty: true,
        connectWith: ".connectedSortable",
        receive: function (event, ui) {
              var itemId = ui.item.attr('id');
              var droppableId = $(this).attr("id");
              alert(droppableId);

              //--Get DOM value
              $.getJSON('/Dom/_ElementDetail/' + itemId, function (data) {
                  //--Save to new table
              var name = data[0].Name;
              var code = data[0].DomDetail;
              var matterId = localStorage['MatterId'];
              var stepId = localStorage['StepId'];
              $.ajax({
                  type: 'post',
                  url: '/DOM/AddElementMaster',
                  data: { name: name, code: code, matterId: matterId, stepId: stepId }
              });

        });
      }

    }).disableSelection();

Answer 1

检查here

据我了解，您设置了一个事件drop或over，如下所示：

$( "#droppable" ).droppable({
    drop: function() {
        console.log($(this));
    }
});

但正如文档中所述，您应该使用

$( "#droppable" ).droppable({
    drop: function( event, ui ) {
          console.log(ui.draggable.attr('id'));
    }
});

over事件相同

<小时/> 当您使用sortable时，可以通过以下方式获取有关拖动操作的信息：

$(".sortable").sortable({
    receive: function(event, ui) {
        var sender_id = ui.sender.attr('id'),
            receiver_id = $(this).attr('id'),
            item_id = ui.item.attr('id'),
            above_id = ui.item.prev().attr('id'),
            below_id = ui.item.next().attr('id');

        console.log("The item '" + item_id 
                    + "' was dragged from " + sender_id 
                    + "to '" + receiver_id 
                    + "'" + (above_id ? " below of '" + above_id + "', " : "") 
                    + (below_id ? " above of '" + below_id + "'" : "")
                   );
    },
    connectWith: ".sortable"
});

sample

jQuery Droppable获取上面项目的id

1 个答案: