JQuery

Question

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

如果下一个项目是空白的，我可以删除一个项目，但是如何找到是否有空白项目并删除下一个项目。

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

我可以获取到被拖拽的item的文本，但是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();
                }
            }
        }
        });

Answer 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>

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

JQuery - How to Conditionally Remove list item from Sortable Target

jquery-ui-sortable