选择并拖动多个列表项（jQuery UI的排序）

我已经找到很好的解决方案（最后的答案）：选择并拖动多个列表项（jQuery UI的排序）

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（使用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

如何解决呢？

来源

2013-03-26 tere

在Safari'6.0.3'和OS X'10.8.3'没有错误。另外我没有看到'insertBefore（）'在你的代码中？问题是，一个jQuery选择器可能失败了'var test = $（'＃myNoneExcistingElement'）;''和'console.log（test）;'会打印null或undefined。 – 2013-03-26 12:20:46

'25.0' chrome – 2013-03-26 12:26:23

@DavidChase没有错误，因为'.insertBefore（）'方法在示例中不存在）;或者它被用作另一种方法的替代品，但无法确认。 – 2013-03-26 12:27:11

我认为它在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/

来源

2013-07-09 13:49:49 Apo

选择并拖动多个列表项（jQuery UI的排序）

回答

相关问题