JQuery - 如何有条件地从可排序目标中删除列表项答案

【问题标题】：JQuery - How to Conditionally Remove list item from Sortable TargetJQuery - 如何有条件地从可排序目标中删除列表项
【发布时间】：2021-07-22 21:45:49
【问题描述】：

我想将一个列表中的一个项目拖到另一个列表中，如果有任何空白项目，我想从目标中删除一个项目，因此列表保持相同的大小。

如果下一项为空，我可以删除一项，但是如何查找是否有任何空白项并删除下一项。

即ui.item.next('isblankrung').remove();

我可以得到被拖动项的文本，但是id是未定义的。

    $('#ladderList').sortable({
        connectWith: '#teamsList, #ladderList',
        items: '.draggable-item, .sortable-item',
        start: function (event, ui) {
            $('#teamsList').sortable('enable');
        },
        receive: function (event, ui) {
        if (ui.item.hasClass('ui-draggable')) {
                // destroy draggable so that we can drag outside the sortable container
                ui.item.draggable("destroy");
            }
        },
        stop: function (event, ui) {
            if (ui.item.hasClass('isteam')) {
            alert(ui.item.id);
            alert(ui.item.text());
                ui.item.removeClass('isteam').addClass('isteamrung');
                ui.item.removeClass('draggable-item').addClass('sortable-item');
                if (ui.item.next().hasClass('isblankrung')) {
                    alert(ui.item.text());
                    ui.item.next().remove();
                }
            }
        }
        });

【问题讨论】：

空白必须在被删除的元素之后还是只删除新列表中的第一个空白？

标签： jquery jquery-ui-sortable

【解决方案1】：

您正在寻找的确切行为并不完全清楚。

如果您只想在新列表中找到第一个空白，您可以这样做：

ui.item.siblings('.isblankrung').first().remove();

如果您想将该空白移到该项目的来源列表中，您可以这样做：

const $blank = ui.item.siblings('.isblankrung').first();
$(event.target).append($blank);

仅先删除示例：

$( function() {
    $( "#sortable1, #sortable2" ).sortable({
      connectWith: ".connectedSortable",
      stop: function (event, ui){
        ui.item.siblings('.isblankrung').first().remove();            
      }
    }).disableSelection();
 });

#sortable1, #sortable2 {
    border: 1px solid #eee;
    width: 142px;
    min-height: 20px;
    list-style-type: none;
    margin: 0;
    padding: 5px 0 0 0;
    float: left;
    margin-right: 10px;
  }
  #sortable1 li, #sortable2 li {
    margin: 0 5px 5px 5px;
    padding: 5px;
    font-size: 1.2em;
    width: 120px;
  }

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
 
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

</head>
<body>
 
<ul id="sortable1" class="connectedSortable">
  <li class="ui-state-default">Item 1</li>
  <li class="ui-state-default">Item 2</li>
  <li class="ui-state-default">Item 3</li>
  <li class="ui-state-default">Item 4</li>
  <li class="ui-state-default">Item 5</li>
</ul>
 
<ul id="sortable2" class="connectedSortable">
  <li class="ui-state-default isblankrung">Blank</li>
  <li class="ui-state-highlight">Item 6</li>
  <li class="ui-state-default isblankrung">Blank</li>
  <li class="ui-state-highlight">Item 7</li>
  <li class="ui-state-highlight">Item 8</li>
</ul>

【讨论】：