選擇並拖動多個列表項（jQuery UI的排序）

Question

我已經找到很好的解決方案（最後的答案）：

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（使用jQuery和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(); 
    } 

}); 

它的偉大工程，但是，當我拖着兩個或多個元素JS控制檯谷歌瀏覽器顯示此錯誤：

Uncaught TypeError: Cannot call method 'insertBefore' of null

如何解決呢？

Answer 1

我認爲它在jQuery的UI _rearrange功能的錯誤...... 所以我也將覆蓋該方法...... 插入後DOM準備好下面的代碼...這將解決這一問題的破解

$.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 
        } 
       }); 

      } 

這裏是小提琴

http://jsfiddle.net/r83zY/