jquery-sortable | A flexible , opinionated sorting plugin for jQuery | Frontend Framework library

I've already submitted an issue here but just wanted to check if you can solve this faster here.

Trying to exclude an item from being draggable works but not from being sortable -- the problem is that other elements can be placed behind it.

SortableJS Docs don't seem to have exclude.

Here's the expected behavior using jQuery UI:

I have imported the sortable and jquery references to my html, however, it says that

Uncaught TypeError: $(...).sortable is not a function

and

Uncaught Error: jQuery is required for jquery-sortablejs

I have never used jquery before hence new to this all. I have taken this exact code as a demo of this website, and it is working on code pen, however wont work on my own laptop.

I'm trying use jquery-ui sortable connected lists and persist sorting changes in a Rails app.

1. Lists have many tasks.
2. Lists can be sorted among each other - works.
3. Tasks can be sorted among each other - works.
4. Tasks can moved between lists - does not work correctly:

Lists/index.html.erb:

I am using sortablejs to make a drag+drop list. I want two buttons, one that outputs the current order of list elements, and another that just resets the current order back to its original state.

I found a couple resources about how to print the current order and to how reset it, but since I'm still somewhat new to javascript, I've been having trouble implementing them.

Currently, my alert just outputs [object HTMLUListElement] and I can't figure out the reset.

Code below. Any help would be appreciated!

We're using the jQuery Sortable library for dynamic menu management similar to WordPress. And it has multi level management.

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

I am trying to use this JavaScript library called SortableJS along with jQuery & jQuery SortableJS. I have the front-end functionality working, but my issue is trying to get it to work successfully with an AJAX request.

I added console.log('test') to see if I could get any results from the AJAX request, but nothing showed. This also makes me believe that my issue has something to do with AJAX.

JavaScript

I have a Gulp script to concatenate, and minimize javascript. It seems to be working but doesn't output the combined file.

The script is (complete - including extra debug bits):

I'm trying to use the jquery-sortable, basically for nesting and ordering items. At the first level and the first item child, it works well for the nesting and sorting. However the childs of the second and subsequent items cant be sorted probably.