Drag-and-drop sorting


Well-known member
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.
Last edited:
Upvote 24
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).
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.

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.
Top Bottom