Forum Academy Marketplace Showcase Pricing Features

↕ [Update Apr 28] - Sortable RG Drag & Drop plugin by EzCode

Hi no-coders !
We have launched our new plugin
Sortable RG drag and drop
Reorder repeating group list with drag and drop feature. Supports touch devices. All changes are saved in browser localstorage.

Demo gifs

desktop_demo

Mobile

Plugin features:

  • Supports touch devices and modern browsers
  • Smooth CSS animations when moving items
  • Control animation speed
  • Supports drag handles
  • Smart auto-scrolling
  • You can swap or reorder items
  • Changes are saved to localstorage so on page reload list will auto order to latest saved changes
  • Remove items from database when drag outside of the box (if enabled in plugin settings)
  • Copy reordered list to new Database in the new order
  • Tap and hold to drag (for touch devices)
  • Save reordered field list in DataBase when using a field list for repeating group

A few details on features:

  • Highlight drop area, you can choose the highlight color.
  • Remove items from database when drag outside the box. To use this feature, enable de checkbox in the plugin settings and set the Database name that is using for the repeating group (See example in our demo)
  • Custom drag handler
    By default you can drag from anywhere but you can use an icon for that, give an ID to it and set this ID in the respective field to the plugin settings (“Move handler ID”), leave this field empty if it is not needed.

Plugin actions

  • Toggle disabled status - use it to enable or disable drag and drop feature.
  • Reset - will reorder items as they were initially
  • Copy reordered items to new DB - copy from one DB to other in new order
  • Save sorted DB field list

Latest updates

Screenshot 2020-05-06 at 12.11.35


Demo: https://ezcodepluginsdemo.bubbleapps.io/sortable

Editor Demo: https://bubble.io/page?version=live&type=page&name=sortable&id=ezcodepluginsdemo

Plugin: https://bubble.io/plugin/sortable-rg—drag–drop-1585393064893x457741439624806400


ez_logo EzCode.co
Feel free to contact us for any inquiries and we’ll be happy to find a solution for your ideas

Regards Andrew from EzCode Team .

12 Likes

Impressive. High demand app! Wish I had this 6 months ago.

2 Likes

Thanks! Maybe it will help you in the future, who knows :slight_smile:

Really nice job :+1:

2 Likes

Hi guys, thanks so much for this great plugin! Is it possible to save the new position info to the database in some way?

1 Like

Hi Josh,
in the current version, no, it is saving only in the localstorage.
However we are looking for a solution to do this. We will do an update as soon as this will be accomplished.

One working feature with database though is that you can delete items by throwing them away of the box (look in demo)

This will be a great plugin !
Does a combinaison with this new plugin https://bubble.io/plugin/1-thing---index-finder-1582937160157x536549292969033700 by @eli and another “Workflow on a list” plugin (BDK, List Shiffer…) would enable to save the postition for each Thing ?

2 Likes

Update v2.0

New feature
Copy items to another DataBase in new order
copy_to_db
Items will be copied in new order. If selected DataBase is not empty, new items will be added to the existing ones.


New states

  • Dragged item ID (Text)
  • Copying in process (Yes/No)
  • Copying process percentage (Number)
6 Likes

Update v2.1

New plugin settings

  • Long press to drag (for touch devices)
    You can set how much milliseconds to press and hold before drag starts.
    While not holding, the group scroll will work as usual so there is no need to disable and re enable sorting feature, just tap and hold and you can drag & drop again :slight_smile:

  • New field “Chosen item color” - background color for the selected element that is been dragged.

The “Highlight drag and drop area” checkbox was removed to simplify settings,
just left the color empty or set it to 0 opacity if you don’t want it.


Regards EzCode Team !

2 Likes

Thank you for this plugin ! It’s great.

Does your plugin use the same iterative process than ListSjifter or BDK Utilities ?

2 Likes

Thanks!

It uses a bit different logic, plugin works only with the selected items, no need to iterate through all items, this is why it works smoothly.
However the iterative process is used for example when saving new order to the new database.

1 Like

Nice plugin - love the animation, but I think you are just short of one thing, if we also knew the dropped on item too, then we could switch order in table too. ’

Was about to have it in the app, but without this, I am afraid it just looks pretty. Your approach to copy database is fine, but it seems more wasteful in terms of processes.

1 Like

You mean a state with an ID of the drop item like now we have Dragged item ID state ?
That’s actually easy to implement, will add it in the next update, thanks!

1 Like

Thank you for the fast response. And yes, dropped on item ID would be perfect. Looking to forward to the update.

Regards
Omar

2 Likes

Hey, regarding the Database field for the plugin, is there anyway to NOT have to supply a database and NOT save the changes automatically? That is, I’d prefer my app to save the changes in the new order after the user has finished sorting to just one field (list) on a database record of my choosing, instead of saving to an entire database.

Also, right now, it seems that if I supply a list that is NOT the full list of records, items disappear after drag and drop. For example, if I set the plugin Database value to a database called “Folders”, and in my RG ,I set the datasource to “Current User’s List of Folders” or "Do a search for Folders created by the Current User where the field “Parent” is empty (to get the top level folders), the plugin doesn’t work! It only works if I supply the full list of Folders.

Thanks!

Hi ezdev,

Thank you for the wonderful plugin. Do you have a timeline as to when we may be able to save the new position info for a specific user?

Kind Regards,
Sean

2 Likes

Hi,
first, about not using the database field, and autosave thing, this will be added in the future updates, there will be an action “save changes”.
At the moment we are working on it, we have me some troubles when changes are saved to DB because then the order is messed up.
We will let you know when it will be done.
Most likely the update will be in small parts, first with database field then with autosave and so one.

About your second question, can you please send a link to a demo where you are testing it so we can investigate the problem ?

Thanks!

Hi, thanks for the question, we are working on improvements and new features continuously and as soon as something is ready to be published, we push an update.

Regards, Andrew.

Update v2.2

  • New feature: Action Save reordered field list to DataBase
  • New state: Saving to DB is in progress
  • New event: New order saved

sortable_update_demo

To do it, use the new action Save sorted DB field list
See our demo in the editor for an example how to use it.

Action setup example

Screenshot 2020-04-28 at 17.13.36

Important change:
The field Data Base is now optional and is used only for the remove from DB mode. So you can use a DB field list for your repeating group not only an entire DB.


In the next update we will ad the feature to save the entire reordered DataBase. Still working on it.


Regards, Andrew from EzCode Team!

3 Likes

Love your work

2 Likes