Question

我正在使用jquery-sortable，在清空或加载空列表容器（ul）时遇到一些困难。例如，如果您有两个容器：

要从中拖动的收藏夹列表始终包含一些项目。
加载为空的目标列表（除非正在对其进行编辑，它将包含一些列表项，但是可以通过将其拖出列表来清空

当空容器（ul）加载为空或在编辑时被清空时，它应该显示一条消息（即此处未显示任何内容）

我尝试了几种无济于事的方法。

为空容器采样HTML

<ul id="mediaItemsListDest" class="playlist-items connectedSortable">
        <!-- force a message in html -->
    <p>Drag and drop an item from the list</p>
</ul>

不同的JQUERY方法

if( $("#mediaItemsListDest li").length >= 1 ) {
      //remove it when the ul contains an li
      $("#mediaItemsListDest p").css('display','none');
 }

或

if( $("#mediaItemsListDest li").length === 0 ) {
      //no li is found, display a message via jquery but don't add it as a <p> element in the html
      $(this).html("Sorry, this is empty");
 }

或

if( !$("#mediaItemsListDest").has("li").length ) {
       $(this).html("Sorry, this is empty");
}

他们都没有工作。我还能如何劫持这个空列表或空列表？

这里是雅的测试小提琴

DEMO

预先感谢

Answer 1

您需要处理每个列表，以更改错误消息的状态，因此，假设我们有以下HTML-示例中的示例：

<ol id="mediaItemsListDest" class="simple_with_animation vertical">
  <p>Drag and drop an item from the list</p>
  <li>Item 1</li>
  <li>Item 2</li>
</ol>

此外，我还扩展了一个用于处理消息状态的函数，代码位于应用程序的初始化部分：

function handleMessage() {
   let liObjects = $('#mediaItemsListDest li');
   let message = $('#mediaItemsListDest p');

   console.log('length', liObjects.length);
   console.log('message', message);

   if (liObjects.length !== 0) {
      message.css('display', 'none');
   } else {
      message.css('display', 'inline');
   }
}

handleMessage();

此函数需要在onDrop事件中调用：

onDrop: function  ($item, container, _super) {
   // code part removed but you can find in your demo

   handleMessage();
}

我做了一个快速测试，一切正常。希望这对您有所帮助，如果您需要更多信息，请告诉我。

jQuery上的空列表消息可排序

1 个答案: