jquery-sortable上的空列表消息

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

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