jQuery拖动到相对位置的可排序列表中时出现可拖动辅助对象位置问题

jQuery Draggable helper position issue when dragging into relatively positioned Sortable list

本文关键字:位置 拖动 对象 问题 列表 相对 排序 jQuery      更新时间:2023-09-26

我有一个可拖动列表,它通过connectToSortable连接到一个可排序列表,一切都按预期工作,但在jQuery UI v1.11.2更新后,出现了以下两个问题:

1) 在进入可排序列表时,可拖动辅助对象会相对于光标位置稍微重新定位。

2) 在离开可排序列表时(显然没有放入辅助对象),可拖动的辅助对象相对于光标进行了显著的重新定位。

我一直在做一些测试,并找到了问题的原因。可排序列表是相对定位的。

助手总是被附加到主体,但在1.11.2更新中,它被附加到了主体,但当您输入可排序项时,它会被附加到可排序列表中。

此项目需要相对定位的容器,因此无法删除相对定位。

HTML:

<div class="composer">
    <ul>
        <li id="draggable" class="ui-state-highlight">Drag me into sortable list and then back here </li>
    </ul>
</div>
<div class="all-content-holder">
    <div class="all-content-background">
        <div class="all-content">
            <ul id="sortable">
                <li class="ui-state-default">Item 1</li>
                <li class="ui-state-default">Item 2</li>
                <li class="ui-state-default">Item 3</li>
                <li class="ui-state-default">Item 4</li>
                <li class="ui-state-default">Item 5</li>
            </ul>
        </div>
    </div>
</div>

JS-

$("#draggable").draggable({
    connectToSortable: "#sortable",
    helper: "clone",
    revert: "invalid"
});
$("#sortable").sortable({
    revert: true
});
$("ul, li").disableSelection();

CSS

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    margin-bottom: 10px;
}
li {
    margin: 5px;
    padding: 5px;
    width: 150px;
}
.composer {
    width:300px;
    background-color:#ccc;
    position: fixed;
    top: 36px;
    bottom: 0;
    z-index: 9999999;
    font-size:11px;
    line-height: normal;
}
.all-content-holder {
    height: 100%;
    margin-left: 300px;
    margin-top: 36px;
    right: 0;
    bottom: 0;
    overflow: auto;
    min-height: 100%;
}
.all-content-background {
    margin: 0;
    overflow-x: visible;
    position: static;
    width: 100%;
    max-width: 100%;
}
.all-content {
    position: relative;
    width: 100%;
    z-index: 1;
}

我创建了以下JSFiddle来复制这个问题:http://jsfiddle.net/bennyticklez/oLowzou6/1/

我尝试了无数次修复,但都无济于事!如果有人能帮忙,那就太棒了。

提前感谢

这是jQuery UI Draggable 1.11.2版本中专门引入的一个bug,1.11.3中也存在。

1.11.4版本以后的版本运行正常,因此将jQuery UI升级到此版本将解决此问题。

我还发现,在1.11.2版本的jQuery UI中使用1.11.4版本的Draggable修复了这个问题,并且没有导致我能找到的任何错误。因此,如果您一直在使用1.11.2/1.11.3版本的jQuery(在过时的CMS等上),只需将1.11.4版本的Draggable放入即可,一切都应该正常工作。

希望这能有所帮助。