How To Drag and Drop Both Up and Down and Left to Right, Kinda Kanban Style?

Wappler General How To
#1

Hi there folks!

I want to create a GUI where users can drag items both up and down and also between different columns left to right… very much like you would do in a Kanban board such as Trello.

Has anyone implemented anything like this in Wappler? If so, what method did you use to create it? Is it all possible with BS5 and standard Wappler functionality?

Thanks!
Antony.

2 Likes
#2

We use MDBootstrap a lot, they have this: https://mdbootstrap.com/docs/standard/plugins/drag-and-drop/

1 Like
#3

https://dhtmlx.com/docs/products/dhtmlxKanban/

I haven’t used their Kanban but have integrated a lot of their widgets with Wappler successfully.

Also found this one which is free under the community license - https://ej2.syncfusion.com/demos/#/material3/kanban/overview.html

2 Likes
#4

I’ve always used Sortable to get these things done as I don’t believe you could make that happen with Wappler standard.

2 Likes
#5

A sort/drag component is included in the roadmap:

  • Elements Draggable/Sorting extension

… and has almost 100 votes.

@George mentioned:

We were already investigating this and the best way to implement it.
We will probably go for https://sortablejs.github.io/Sortable/

(but that was a while ago - in 2019)

1 Like
#6

Thanks everyone! :pray:

My application is not quite Kanban style… it is for a 2D array of bookings, so I want to be able to drag an appointment into another slot:

day     room1   room2    room3
------------------------------------
Mon     John
Tue
Wed             Jane
Thu
Fri     Julie

So I want to be able to drag Julie to room2 on a Monday, for example.

So it isn’t based on sorting within the drag/drop.

With your knowledge of the solutions you proposed @mebeingken, @TomD, @TMR, @Heather_Mann, would they be able to work in this way? :thinking:

Thanks!

Antony.

#7

Sortable :white_check_mark:

3 Likes
#8

Have a look at - https://js.devexpress.com/jQuery/Demos/WidgetsGallery/Demo/Scheduler/Timelines/MaterialBlueLight/

1 Like
#9

SortableJS seems the way to go, since I sense it is free, and who knows, maybe one day it will become part of Wappler (@George :wink:)

So @mebeingken, I guess I do that with the swap setting?

swap: true

And… when an item is dropped in the new position, how do I trigger an event in Wappler for the item I placed and the one it swapped with to call a Server Connect… and obtain some kind of value for the location it got swapped with? :thinking:

#10

Swap is not something I’ve done, but it allows for two elements to trade location.

In my case, I update a data store to set the new sort order.

You can use onEnd to trigger things once the element is dropped. The event will have all the information you need and you can use dmx.parse().

 onEnd: function (evt) {
        
               
    var ingredientList = Array.from(evt.item.parentElement.children);

    ingredientList.forEach( function (ingredient, index) {

       var ingredient_datastore_id = ingredient.dataset.ingredient_id;
                    
       dmx.parse("content.ingredients.update({$id: "+ingredient_datastore_id +"},{sort_order: "+index+"})");
    });
                
 }
3 Likes
#11

Thanks sooo much for your help Ken… I’ll have a play!