Ever wondered how to create a card similar to
I have just finished a video where I created the card in about 2 minutes. Please have a look at
Even if you do not have use for the card, the video contains useful workflows that may be of use elsewhere in your project.
Thank you Ben! Your presentations are excellent.
Hi @ben, another great video. Clean and well presented. Thanks.
Maybe not right for this series but any chance of simple drag and drop action/interface for the end user (not the creator of the page) so they can change the order of the Employee Cards and save the new order back to a database? Just a thought 
Hi Neil, I’ll revamp the create gallery video series. There I can show the re-ordering of the images or cards. Thanks for the feedback.
Ooohh that would be great! Just what I am looking for.
Thanks Ben! It’s this kind of detailed micro level instruction that often gets missed and I have spent endless hours trying to figure out how to duplicate an effect! Keep them coming 
Great idea, look forward to it.
I meant to say, one thing I really liked about the posted video was the clear way in which you show how to add extra CSS and in particular the dynamic CSS like --light. I have not used that in Wappler myself but will definitely be having a play after seeing your video. Cheers
Great job Ben. It is very very useful and well presented.
Off topic, but here goes.
This is brilliant, @ben. Would be great if this could be built into Wappler in the future.
LOVE that!!!
Excellent @ben thank you. I will study it a little later and then implement 
A couple of questions…
Just curious, is there a simple way to save the new order as and when each card is dropped?
Could this work just as easily on DIVs, IMGs etc as well as cards?
Instead of the submit button, you could submit the form on mouse-up.
The class of drag-item can be placed on any element. Just make sure that the form input fields reside in the same element. As an example, I could have made the column as the drag-item in which case I would have to place the input fields outside of the card, but inside the column. As you cannot place the input fields inside of an image, this means that images need to be placed in a drag-item container.
As a heads-up, in the next major version of Bootstrap (v5+), you will nee to precede the variable with bs as in
--bs-light
Great example @ben ! You might want to use https://sortablejs.github.io/Sortable/ for better results and it also doesn’t uses jQuery.
We are thinking of integrating something like this as App Connect Sortable component indeed. Just looking for the best possible integration.
Fingers crossed we are getting close to a built in Wappler Sortable component 