react-sortablejs: Uncaught Sortable: `el` must be HTMLElement, and not [object Object]

You probably call sortable before DOM has been ready. This is why element is null.

in my case this error occurred because I’m instantiating SortableJS in a common footer and hence the error appears on those pages where the sortable element is missing. Fix? I wrapped it in a

if (document.getElementById("dropzone-previews") !== null) { ... }

In my case this error raised because same id ‘bar’ assigned to multiple elements.

Like <ul id=‘bar’ name=‘bar’ <select id=‘bar’ name=‘bar’

After removing reuse of ‘bar’ as id of select everything working normal.

In my case, I was being special and importing Sortable from 'sortablejs' instead of importing from react-sortablejs

One of those silly but easily overlookable mistakes 🙄

Hi,

I am facing the same issue, using plugin version 1.6.1. Here is below my code:

(function ($) {
    'use strict';
    $(document).ready(function () {
        var byId = function (id) {
            return document.getElementById(id);
        };
        if (!console.log) {
            console.log = function () {
                alert([].join.apply(arguments, ' '));
            };
        }
        Sortable.create(byId('foo'), {
            group: "words",
            animation: 150,
            dataIdAttr: 'data-id',
            draggable: '.item',
            store: {
                get: function (sortable) {
                    var order = localStorage.getItem(sortable.options.group);
                    return order ? order.split('|') : [];
                },
                set: function (sortable) {
                    var order = sortable.toArray();
                    console.log(order, 'foooooooooooooooooooooooo');
                    $('.visuaplayoutCol01').attr('value', order);
                }
            },
            onEnd: function (/**Event*/evt) {
                console.log(evt.item.dataset.id, 'datasetID');  // element's new index within parent
                var order = sortable.toArray();
                $('.visuaplayoutCol01').attr('value', '');
                $('.visuaplayoutCol02').attr('value', $('.visuaplayoutCol01').attr('value') + ',' + evt.item.dataset.id);
            },
            onAdd: function (/**Event*/evt) {
                var itemEl = evt.item;  // dragged HTMLElement
                console.log(evt.from, 'From');  // previous list
                console.log(evt.to, 'To');  // next list
                //$('.visuaplayoutCol02').attr('value', $('.visuaplayoutCol01').attr('value') + ',' + evt.item.dataset.id);
            },
            onUpdate: function (evt) {
                var itemEl = evt.item;  // dragged HTMLElement
                console.log(itemEl, 'draggedelement');
            },
            onSort: function (evt) {
                var itemEl = evt.item;  // dragged HTMLElement
                console.log(itemEl, 'onSort');
            },
        });


        Sortable.create(byId('bar'), {
            group: "words",
            animation: 150,
            dataIdAttr: 'data-id',
            draggable: '.item',
            store: {
                get: function (sortable) {
                    var order = localStorage.getItem(sortable.options.group);
                    return order ? order.split('|') : [];
                },
                set: function (sortable) {
                    var order = sortable.toArray();
                    console.log(order, 'baaaaaaaaaaaaaaaaaaaaaaaaar');
                    $('.visuaplayoutCol02').attr('value', order);
                }
            },
            onEnd: function (/**Event*/evt) {
                $('.visuaplayoutCol02').attr('value', '');
                $('.visuaplayoutCol01').attr('value', $('.visuaplayoutCol02').attr('value') + ',' + evt.item.dataset.id);
            },
            onAdd: function (/**Event*/evt) {
                var itemEl = evt.item;  // dragged HTMLElement
                console.log(evt.from, 'From');  // previous list
                console.log(evt.to, 'To');  // next list
            },
            onUpdate: function (evt) {
                var itemEl = evt.item;  // dragged HTMLElement
                console.log(itemEl);
            },
            onSort: function (evt) {
                var itemEl = evt.item;  // dragged HTMLElement
                console.log(itemEl, 'onSort');
            },
        });

    });
})(jQuery);

Thanks in advance for your help!

Regards, Abdullah @wpplugindev