选择并拖动多个列表项（jQuery ui 可排序）答案

【问题标题】：Select and Drag Multiple List Items (jQuery ui sortable)选择并拖动多个列表项（jQuery ui 可排序）
【发布时间】：2013-03-26 12:18:47
【问题描述】：

我找到了很好的解决方案（最后一个答案）：

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();
    }

});

效果很好，但是当我在 Google Chrome 中拖动两个或更多元素时，JS 控制台显示此错误：

未捕获的类型错误：无法调用 null 的方法“insertBefore”

我该如何解决？

【问题讨论】：

在 Safari 6.0.3 和 OS X 10.8.3 上没有错误。另外我在您的代码中没有看到insertBefore()？问题是 jQuery 选择器可能失败 var test = $('#myNoneExcistingElement'); 和 console.log(test); 将打印 null 或 undefined。
25.0 chrome 中没有错误
@DavidChase 因为示例中没有.insertBefore() 方法；）或者它在另一种方法中用作替代方法，但无法确定。
@Allendar 我明白了，我只是想分享我的测试 :)
错误仍然出现（最新的 Chrome）。只需从第一个列表中选择两个元素（一个和两个），然后将它们拖到 inside 这个列表中。经过 2 或 3 次操作后，您将收到错误消息。我在几秒钟内数出了 10 多个错误。

标签： jquery user-interface

【解决方案1】：

我认为它是 jquery-UI _rearrange 函数中的一个错误...... 所以我做了一个 hack 覆盖了那个方法...... 在 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/

【讨论】：