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

scyqe7ek 于 2021-09-13 发布在 Java

关注(0)|答案(1)|浏览(351)

我想将一个项目从一个列表拖到另一个列表，如果有任何空白项目，则从目标中删除一个项目，以便列表保持相同的大小。
如果下一个项目为空，我可以删除该项目，但如何查找是否存在任何空项目并删除下一个项目。
即 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

来源：https://stackoverflow.com/questions/68491837/jquery-how-to-conditionally-remove-list-item-from-sortable-target

1条答案

按热度按时间

0sgqnhkj1#

您所寻找的确切行为并不完全清楚。
如果您只想在新列表中找到第一个空白，可以执行以下操作：

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>

赞(0）回复(0）举报 2021-09-13

我来回答

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

1条答案

相关问题

热门标签

最新问答