пустой список сообщений на jquery сортируемый - PullRequest
Новая
       39

пустой список сообщений на jquery сортируемый

1 голос
/ 28 марта 2019

Я работаю с 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

Заранее спасибо

1 Ответ

2 голосов
/ 28 марта 2019

Вам нужно обрабатывать в каждом списке изменение состояния сообщения об ошибке, поэтому предположим, что у нас есть следующий 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();
}

Я сделал быстрый тест, и он работал нормально,Я надеюсь, что это помогает, дайте мне знать, если вам нужна дополнительная информация.

...