Reactive Drag and Drop and Sort using jQuery, jQuery UI, and jQuery UI Touch Punch library.

Complete with event and token passing from draggable to droppable.

Please see screenshots and included sample app.

Notes for dragging List Item:

List Group naturally had "overflow: hidden" style.
So if you drag list item outside of it's list group, it will be invisible/hidden.
Please apply this in the css section of the screen you want to drag list item:

.list.list-group {
    overflow: visible !important;
}

Notes for Sortable List with ConnectWith option:

To be able to connect sortable to empty List, you must set min-height for that List.

So any draggable from other sortable can be dropped into that List.

Example:

min-height: 100px;

I made/ported this from jQuery Drag Drop Sort Traditional Web Forge Plugin.

Because I cannot found reactive version that suits my needs.

I accept small donation via paypal: harlins@gmail.com