Reactive icon

Reactive Drag & Drop & Sort

Stable version 1.2.2 (Compatible with OutSystems 11)
Uploaded on 28 October 2022 by 
 (2 ratings)

Reactive Drag & Drop & Sort

Drag and Drop and Sort for Reactive Web
Read more

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.


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:

Release notes (1.2.2)

Removed dependency to Deprecated Outsystems UI's jQuery, and use own jquery.min.js

Reviews (2)
6 Mar
in version 1.2.2
Works a little bit weird with the scroll pushed down.
in version 1.2.1
Good and with the example, it is easy to use.
I'm currently trying to use a "enable" flag to disable the feature if the user doesn`t have access.