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

编程问答 2022-08-26

问题描述

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

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

即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();
                }
            }
        }
        });

解决方法

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

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

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>

jqueryjquery-ui-sortable