Drag/Sort for tagify

Feature Request
1

I’m using tagify to allow users to create lists but would love to be able to offer the option of reordering the items in the list.

It would be really useful to add the drag/sort functionality to the tagify component - requires yairEO’s integration as detailed here:

I appreciate it wouldn’t be too difficult to add a custom extension but think it would be a useful addition to the native Wappler offering. I also know you could create a form with sortable elements that Wappler already offers. What I would love to see is a sortable checkbox in the tagify setup that enables/disables functionality

2

I think this would be very useful. It would go some way towards fulfilling what might be the most requested, unfulfilled feature request.

3

There is already a sortable option for form rows (so that FR was partly fulfilled) but the instructions for it are a little hidden:

This, though, would potentially add sorting/ordering functionality MUCH more easily but the click of a checkbox

4

Yes, perhaps sorting form rows fulfills part of the FR (a very small part). Your suggestion would fulfill a more useful part, IMO.

In any case, if the feature were fully implemented, using the library George mentioned for example, it would be a great addition to Wappler.

1 Like
5

@patrick I presume it would be you looking at this if it gets the go ahead.

I thought I would have a little go and it seems pretty straight forward to add (I appreciate I haven’t added anything to turn on/off in the UI so will be active on all tagify for this project)

All I needed to do was get the CSS and JS from the yairEO Github project (https://github.com/yairEO/dragsort) and add include them on my page.

I then added:

        this.dragsort = new DragSort(this.tagify.DOM.scope, {
            selector: '.' + this.tagify.settings.classNames.tag,
            callbacks: {
                dragEnd: function () { e.tagify.updateValueByDOMTags() }
            }
        })

to the end of the render function in the dmxTagify script.

I’m sure you may find a more elegant solution but it works for what I want and thought it might save you a bit of time…

6

Thanks - this works a treat. I hope the team will incorporate it into Wappler.

7

If you want the option of having it sortable or not make the extra code:

if (this.props.sortable) {
            this.dragsort = new DragSort(this.tagify.DOM.scope, {
                selector: '.' + this.tagify.settings.classNames.tag,
                callbacks: {
                    dragEnd: function () { e.tagify.updateValueByDOMTags() }
                }
            })
        }

and add

,
sortable: {
   type: Boolean,
   default: !1
}

to the attributes json

Then to make a tagify element sortable just add a sortable="true" property to the input

1 Like
8

Bump - could this be added to the Tagify component?
I currently have to roll back changes from GIT every time I update Wappler App Connect files.

10

Bump

11

Bump - the dragsort library is MIT and the integration is coded above

12

Another little bump - every time I update Wappler I have to compare changes (to make sure you haven’t changed something) and merge/revert to the sortable version

13

Please, please, please could this functionality be added? Every update to Wappler means I have to manually edit the tagify file

All the hard work has been done above - it should be a very quick, easy win

14

Bump

15

Hi @patrick - if you’re looking at many of the integrations, could you look at adding this functionality to AC2?

16

Have a test where I tried to implement it, it works but feels very unresponsive.

You can test with the following update: dmxTagify.zip (9.8 KB)

To the tagify dom element add dragsort as attribute. You will also need the dragsort library includes in your html head.

<link href="https://cdn.jsdelivr.net/npm/@yaireo/dragsort/dist/dragsort.css" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/@yaireo/dragsort"></script>

Let me know what you think and if it should be implemented like this.

18

Added to Tagify in Wappler 6 beta 10.