Drag-and-drop sorting

[CMTV]

Since XenForo supports Dragula, I think it is time to add drag-and-drop sorting functionality and get rid of inconvenient "Sort" pages/setting "Display order" property for each entity.

Would be nice to have this for smilies, notices, nodes:


Please, like this message if you want something presented above in XenForo.

This can be done really easily. I did this by simply extending XF.ListSorter javascript handler:

var CMTV_CB = window.CMTV_CB || {};

!function($, window, document, _undefined)
{
    "use strict";

    CMTV_CB.DataListSorter = XF.extend(XF.ListSorter, {
        options: $.extend({}, XF.ListSorter.prototype.options, {
            sortUrl: 'admin.php?criteria-builder/categories/ajaxSort'
        }),

        init: function ()
        {
            this.dragula = dragula([this.$target.find('.dataList-table tbody')[0]], {
                moves: XF.proxy(this, 'isMoveable'),
                accepts: XF.proxy(this, 'isValidTarget')
            });

            this.dragula.on('drop', XF.proxy(this, 'onDrop'));
        },

        onDrop: function (el, target, source, sibling)
        {
            var data = {
                moved: $(el).data('category-id'),
                before: $(sibling).data('category-id')
            };

            XF.ajax('post', this.options.sortUrl, data, function() {});
        }
    });

    XF.Element.register('datalist-sorter', 'CMTV_CB.DataListSorter');
}
(jQuery, window, document);

Two things:

• Making dragula object to work with tbody
• After successfull element drop -> make an ajax request and recalculate all display_orders

This will also work with filter box, since we only use moved and before ids.

 

[Neutral Singh]

@CMTV,
IMHO, if you have already done the hard work, then who is stopping you from releasing it as an add-on. Looks epic and very useful!

 

[Mike]

I'm not sure this is inherently a "not planned", but the separate sort page is intentional. Notably, this sort of sorting approach tends to interfere with touch interfaces, as the action you are taking is ambiguous. That essentially means that you need a dedicated drag gadget, though there are still situations where that may be accidentally touched, so make sort a more explicit opt in helps resolve that.

More significant though, the vast majority of our sortable pages involve tree-based sorting (such as for nodes) or at least with grouping (smilies). The tree based approach is not possible on these data list pages (the output doesn't expose the tree). The basic grouping approach may be possible, though that would require a fair bit of investigation (as the meaning of grouping differs between things like smilies and notices, for example). At first glance, the only "simple" sort page we have is related to reactions.

The auto-save approach may not be generally safe either as a reorganization can potentially trigger a fair amount of work (such as moving nodes, which requires permission rebuilds).

 

[SeaWorld]

This is something I feel was lacking in the backend, since changing sorting is time consuming the way it is now. I would love to see it in production.

In addition, a number dom element would be nice, showing the groups sorting as well as the children within the groups.

Spoiler

 

[Chris D]

Your screenshot is of the node list, which is sortable. You just need to click the "Sort" button at the top to switch to that interface.

 

[SeaWorld]

Your screenshot is of the node list, which is sortable. You just need to click the "Sort" button at the top to switch to that interface.

I still like the idea

 

[Blatchy]

Your screenshot is of the node list, which is sortable. You just need to click the "Sort" button at the top to switch to that interface.

How the hell did I not know about this?

Did this always exist?

 

[CMTV]

Did this always exist?

Never used xF 1. But it was always there since xF 2.

 

[Chris D]

Yes it was new in XF2.

There are a few places where a button in that location can trigger a UI to enable you to sort things.