Selecting and dragging multiple list items (jQuery ui sortable)

Question

I found a great solution (last answer):

jQuery Sortable - select and drag multiple list items

http://jsfiddle.net/hQnWG/480/

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 fine, but when I drag two or more elements, the JS console in Google Chrome shows this error:

Uncaught TypeError: cannot call 'insertBefore' method from null

How to fix it?

Answer 1

I think this is a bug in the jquery-UI _rearrange function ... so I did a hack that overrides this method ... Paste the code below after dom is ready ... which will fix the problem.

 $.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 violin

http://jsfiddle.net/r83zY/