Draggable / Sortable Elements

Looks like “Draggable” is now natively implemented into HTML5. The BIG Question here is how to get back these information in an easy way to MySQL etc?

Would love to see that feature as it would help to

  • Rearrange quickly elements
  • Sortable ordering for Galleries with (orderid in mysql column) etc.
  • Helpful for Admin CRUD
  • Create playful shopping carts, menu orders or even quiz!

Examples :


https://codepen.io/nonstopnate/pen/RrQwjO

I think this would be a useful feature. I don’t suppose it would be easy to implement. In the meantime, there is a very useful tutorial for this by @t11. I’ve used this technique a number of times.

You may also benefit from the following videos https://www.youtube.com/playlist?list=PLUjqTJN3byC9kK8YZkmGwjo9nrEipl2yb, parts 9 and 22

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

to offer full cross browser integration.

But indeed the big question is how to pass the id’s back to the database after reordering.
I was thinking maybe auto populating hidden fields containing the order number and id that are submitted.

12 Likes

Very good idea! Maybe to have kinda „wizard or help windows“ to select which columns should be stored or passed. I guess thats the only way.

I think about some GUI where it would be possible to: Choose columns to store/pass and in which format. So it could be passed to mysql or even API or maybe file.

@George that sortable JS is Amazing! Woow and I love that nested stuff its so powerful! Imagine creating your own dynamic Navigation and reorder or nest it easily!

Looks like passing that as an array or json would be helpful and then push to file, api or mysql…

Important:

There is already a feature request as I know for sortable. Maybe to merge that topic here to the other existing one…

1 Like

Good idea Freddy! I came here to make the same request and see you’ve already thought of it.

2 Likes

This would be a great functionality for us too!

2 Likes

any news about sortable component?

1 Like

Check a brief description on how you can create the functionality

Thank you

3 Likes

Sortable Component

Can you give an example of when this would be useful? Maybe a site that already uses this method?

If this is for reordering items on an admin page - so items will appear in a particular order - then this is a something I use a lot.

It would be useful if there were a feature for this in Wappler, but there is a very good tutorial by @t11 here:

Yeap I need …I want to create database driven bootstrap navbar

Hi Serhat, how is the navbar related to drag and drop reordering of items? :slight_smile:

1 Like

Hello @Teodor,
I mean , menu items (buttons ) :blush:. I want to create sortable menus (drag&drop) on admin page like this example

https://www.codeproject.com/Tips/526004/%2FTips%2F526004%2FDatabase-Driven-Dynamic-Menu-Control

I can’t imagine a feature quite like that would be added to Wappler. (I think menus like that can be useful - but they were excluded from Bootstrap and are not as popular as they were.)

However, the main challenge - having a means to control the order of menu items using drag and drop (however that menu is created) - is covered in the tutorial I linked to. As items are reordered, the relevant field in the database (which controls the sort order) is updated.

Hi Serhat,
I can’t find anything in this tutorial related to drag&drop :slight_smile:
The original poster suggested drag&drop to be added. Are you referring to multi level menu, as this is not really planned and we are not fans of multi level menus in responsive design?

Example of use

1 Like

Maybe this video can help what I am saying :slight_smile: sorry I cant tell my idea

2 Likes

yes, yes, yes :slight_smile: This is what I want,
it is wonderful :wink: