jQuery   发布时间:2022-03-30  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了jquery – 将Draggable连接到Sortable会导致helper元素跳转大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个jQueryUI可拖动对象和页面上的可排序对象.

将元素从可拖动元素拖动到可排序元素会导致拖动元素跳到页面左上角.

这是演示:http://jsfiddle.net/travisrussi/aBhDu/1/

重现:

>将“项目5”从可拖动的div(顶部框)拖到可排序的div(底部框)

实际结果:

>项目5在可排序 – http://i.stack.imgur.com/474OP.jpg上拖动时跳到左上角

看似拖动的元素从相对位置切换到绝对位置.被拖动的’li’切换自:

<li class="ui-state-default ui-draggable" style="position: relative; left: 52px; top: 9px;">Item 3</li>

对此

<li class="ui-state-default ui-draggable ui-sortable-Helper" style="position: absolute; left: 67px; top: 91px; width: 80px; height: 20px;">Item 3</li>

当可拖动项目被拖入可排序对象时.

这是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 Help.这个想法是在创建帮助程序时将位置从相对转换为绝对.

这是使用’clone’帮助器的工作演示的链接http://jsfiddle.net/travisrussi/aBhDu/

大佬总结

以上是大佬教程为你收集整理的jquery – 将Draggable连接到Sortable会导致helper元素跳转全部内容,希望文章能够帮你解决jquery – 将Draggable连接到Sortable会导致helper元素跳转所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。