Select and Drag Multiple List Items (jQuery ui sortable)

Question

I have found great solution (last answer):

jQuery Sortable - Select and Drag Multiple List Items

HTML:

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>
<ul>
    <li>Four</li>
    <li>Five</li>
    <li>Six</li>
</ul>

JavaScript (with jQuery and jQuery UI):

$("ul").on('click', 'li', function (e) {
    if (e.ctrlKey || e.metaKey) {
        $(this).toggleClass("selected");
    } else {
        $(this).addClass("selected").siblings().removeClass('selected');
    }
}).sortable({
    connectWith: "ul",
    delay: 150, //Needed to prevent accidental drag when trying to select
    revert: 0,
    helper: function (e, item) {
        var helper = $('<li/>');
        if (!item.hasClass('selected')) {
            item.addClass('selected').siblings().removeClass('selected');
        }
        var elements = item.parent().children('.selected').clone();
        item.data('multidrag', elements).siblings('.selected').remove();
        return helper.append(elements);
    },
    stop: function (e, info) {
        info.item.after(info.item.data('multidrag')).remove();
    }

});

It works great but when I'm dragging two or more elements JS console in Google Chrome shows this error:

Uncaught TypeError: Cannot call method 'insertBefore' of null

How do I fix it?

No errors on Safari 6.0.3 and OS X 10.8.3. Also I don't see insertBefore() in your code? What the problem is that a jQuery selector probably failed var test = $('#myNoneExcistingElement'); and console.log(test); will print null or undefined. — user1467267
– user1467267, Commented Mar 26, 2013 at 12:20
@DavidChase because the .insertBefore() method is absent in the example ;) Or it is either used as substitute in another method, but can't confirm that for sure. — user1467267
– user1467267, Commented Mar 26, 2013 at 12:27
Errors stil show up (newest Chrome). Just select two elements from first list (one and two) and drag them inside only this list. After 2 or 3 actions u will get error. I count over 10 errors in a few seconds. — tere
– tere, Commented Mar 26, 2013 at 14:04

Apo · Accepted Answer · 2013-08-14 07:16:45Z

4

I think its a bug in jquery-UI _rearrange function ... so i did a hack which overrides that method... Insert the below code after dom ready ...that will fix the issue

$.ui.sortable.prototype._rearrange = function (event, i, a, hardRefresh) {

                a ? a[0].appendChild(this.placeholder[0]) : (i.item[0].parentNode) ? i.item[0].parentNode.insertBefore(this.placeholder[0], (this.direction === "down" ? i.item[0] : i.item[0].nextSibling)) : i.item[0];
                this.counter = this.counter ? ++this.counter : 1;
                var counter = this.counter;

                this._delay(function () {
                    if (counter === this.counter) {
                        this.refreshPositions(!hardRefresh); //Precompute after each DOM insertion, NOT on mousemove
                    }
                });

            }

here is the fiddle

http://jsfiddle.net/r83zY/

edited Aug 14, 2013 at 7:16

answered Jul 9, 2013 at 13:49

Apo

416 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Select and Drag Multiple List Items (jQuery ui sortable)

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related