将Draggable连接到Sortable会导致helper元素跳转
我有一个jQueryUI可拖动对象和页面上的可排序对象。
将元素从可拖动元素拖动到可排序元素会导致拖动的元素跳到页面的左上角 。
这是演示： http ： //jsfiddle.net/travisrussi/aBhDu/1/
重现：
- 将“项目5”从可拖动的div（顶部框）拖到可排序的div（底部框）
实际结果：
- 拖动到可排序项目时，项目5跳转到左上角 – http://sofzh.miximages.com/jquery/474OP.jpg
看似拖动的元素从相对位置切换到绝对位置 。 被拖动的’li’切换自：
Item 3 对此：
Item 3
当可拖动项目被拖入可排序对象时。
这是jQueryUI 1.8.12的相关代码片段 （从第3041行开始）：
//The element's absolute position on the page minus margins this.offset = this.currentItem.offset(); this.offset = { top: this.offset.top - this.margins.top, left: this.offset.left - this.margins.left }; // Only after we got the offset, we can change the helper's position to absolute // TODO: Still need to figure out a way to make relative sorting possible this.helper.css("position", "absolute"); this.cssPosition = this.helper.css("position"); $.extend(this.offset, { click: { //Where the click happened, relative to the element left: event.pageX - this.offset.left, top: event.pageY - this.offset.top }, parent: this._getParentOffset(), relative: this._getRelativeOffset() //This is a relative to absolute position minus the actual position calculation - only used for relative positioned helper }); //Generate the original position this.originalPosition = this._generatePosition(event); this.originalPageX = event.pageX; this.originalPageY = event.pageY;
有没有我不使用的配置选项？
CSS有问题吗？
或者这是jqueryUI中的错误？
跳转的主要原因是draggable的’helper’选项未设置为’clone’。 如果使用克隆助手，则跳跃问题就会消失。
如果您需要使用“原始”助手设置，您仍然会遇到跳跃问题。 一个可能的解决方案可能是使用自定义帮助程序选项，如下所示： jQueryUI Draggable Helper Option帮助 。 这个想法是在创建帮助器时将位置从相对位置转换为绝对位置。
这是使用“克隆”助手的工作演示的链接： http ： //jsfiddle.net/travisrussi/aBhDu/
似乎自定义帮助函数解决了这个问题，如下所示：
$( ".draggable" ).draggable({ connectToSortable: "#sortable", //helper: "original", revert: "invalid", helper: function() { return $(this); } });