Styjun

I'm working with jquery-sortable and I'm having some difficulty modifying the list container (ul) when it's been emptied or loaded empty. For example, If you have two containers:

• A collection list to drag from that always contains a few items.


• A destination list which loads empty (unless it is being edited and it will contain some list items but can be emptied by dragging them out of there

The empty container (ul) should display a message (i.e. nothing here) whenever it loads empty or it gets emptied on edit

I tried several approaches with no avail.

SAMPLE HTML FOR EMPTY CONTAINER

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

DIFFERENT JQUERY APPROACHES

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

or

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

or

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

None of them worked. How else can I hijack this empty or emptied list?

Here's a testing fiddle for ya

DEMO

Thanks in advance

You need to handle on every list change the error message state so let's say we have the following HTML - example from your demo:

<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>

Additionally I have extended with a function which is handling the message state, code is placed on initialization part of the application:

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

This function needs to be called in onDrop event:

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

 handleMessage();

I did a quick test and it was working fine. I hope this one is helping, let me know if you need more information.