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

None 他们成功了。我还能如何劫持这个空的或清空的列表？

这里有一个测试 fiddle 给你：

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-sortable 上的空列表消息

Empty list message on jquery-sortable

javascript

jquery

jquery-ui-sortable