Javascript jquery排序表上的空列表消息

我正在使用

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>

或

它们都不起作用。否则我怎么能劫持这个空的或空的列表呢

这里有一把测试小提琴给你：

---

提前感谢。

您需要处理每个列表更改错误消息状态，因此假设我们有以下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>

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

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

   handleMessage();
}

---

我做了一个快速测试，效果很好。我希望这一测试有帮助，如果您需要更多信息，请告诉我。

效果很好！有一个鬼占位符我无法删除或访问。开发控制台显示一个空的UL，但当容器清空时，其中有一些东西，在清空后创建了不必要的空间。但是我我猜这是脚本“钩住”某个目标所必需的，我相信你会的。我希望我至少能让它离开css，这样它就不会改变我的列表。但这与这个问题无关。你的答案很好。谢谢通过修改你的css（）；使用addClass（）和removeClass（）解决了这个问题在上面撒上一点flexbox css…就可以吃了！

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

<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: function  ($item, container, _super) {
   // code part removed but you can find in your demo

   handleMessage();
}