具有多个元素的jQuery UI可排序抛出"TypeError:无法读取空的属性'insertBefore‘“

Question

我正在尝试使用多个元素实现拖放，类似于这个答案：http://jsfiddle.net/hQnWG/614/的示例

该示例在jQuery 1.9.1和jQuery UI 1.9.2 (最多1.10.1)中运行良好，但一旦使用新版本(如jQuery 1.11.3和jQuery UI 1.10.2或更新版本)，就会出现以下问题。

当选择多个元素并开始将底部大多数选定的元素缓慢地拖到顶部时，就在它会突然切换到下一个位置之前，会抛出以下JS错误：

Uncaught TypeError: Cannot read property 'insertBefore' of null
   at t.(/hQnWG/614/anonymous function).(anonymous function)._rearrange (https://code.jquery.com/ui/1.10.2/jquery-ui.min.js:7:15171)
   at t.(/hQnWG/614/anonymous function).(anonymous function)._rearrange (https://code.jquery.com/ui/1.10.2/jquery-ui.min.js:5:5028)
   at t.(/hQnWG/614/anonymous function).(anonymous function)._mouseDrag (https://code.jquery.com/ui/1.10.2/jquery-ui.min.js:7:6)
   at t.(/hQnWG/614/anonymous function).(anonymous function)._mouseDrag (https://code.jquery.com/ui/1.10.2/jquery-ui.min.js:5:5028)
   at t.(/hQnWG/614/anonymous function).(anonymous function)._mouseMove (https://code.jquery.com/ui/1.10.2/jquery-ui.min.js:5:12328)
   at t.(/hQnWG/614/anonymous function).(anonymous function)._mouseMove (https://code.jquery.com/ui/1.10.2/jquery-ui.min.js:5:5028)
   at HTMLDocument.o._mouseCapture._mouseDistanceMet._mouseDelayMet._mouseMoveDelegate (VM687 jquery-ui.min.js:5)
   at HTMLDocument.dispatch (VM251 jquery-1.11.3.min.js:4)
   at HTMLDocument.r.handle (VM251 jquery-1.11.3.min.js:4)

下面是示例中使用升级的jQuery版本的分叉：http://jsfiddle.net/v3p6wsk2/6/

我试着调试它，但是找不到任何解释为什么拖动项的parentNode可以是空的。

​

我甚至在jQuery UI 1.10.2.变更日志中找不到任何提示，说明是什么改变了这个脚本。

不幸的是，我无法更改我正在处理的项目中的版本。是否有可能使这一工作与上述版本？

Answer 1

据我所见，问题是调用parentNode.insertBefore的元素是被拖动的元素之一(从原始表中删除)，因此实际上已经没有父元素了。

真正让我感到困惑的是，我认为问题不是直接在helper或stop函数内，而是介于两者之间，因为错误是在sort-event之后触发的。

我不知道这个问题是从哪里产生的，因为它是与旧版本一起运行的，但是通过反复尝试，我可能已经找到了解决您的问题的方法。

与其删除助手中的元素，不如将它们隐藏起来，并在将删除的元素插入列表后删除这些隐藏元素。

见我刚刚更新了我的小提琴。

这可能会解决您的问题，尽管它没有解决(甚至找不到)造成这个问题的原因。