Open lotusms opened 5 years ago
I fixed it, perhaps this should somehow integrated.
<ul id="mediaItemsListDest" class="playlist-items connectedSortable">
<p class="empty-msg">Drag and drop an item from the list</p>
</ul>
function handleMessage() {
let liObjects = $('#mediaItemsListDest li');
let message = $('#mediaItemsListDest p.empty-msg');
if (liObjects.length !== 0) {
message.addClass('hide');
message.removeClass('show');
} else {
message.removeClass('hide');
message.addClass('show');
}
}
handleMessage();
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:
collection list to drag from that always contains a few items.
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.
or
or
None of them worked. Do you have a callback in place that can be added to the sortable function to display a message when empty? For instance: