jQuery拖动到相对位置的可排序列表中时出现可拖动辅助对象位置问题
jQuery Draggable helper position issue when dragging into relatively positioned Sortable list
我有一个可拖动列表,它通过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放入即可,一切都应该正常工作。
希望这能有所帮助。
相关文章:
- 通过拖动可以更改三维模型对象在Three.js场景中的位置
- 我如何获得“”的原始位置;ui“可拖动”;在“;drop”;事件
- javascript可拖动滑块,可在mouseUp上捕捉回中间位置
- 拖动&应用负位置时掉落
- jQuery拖动到相对位置的可排序列表中时出现可拖动辅助对象位置问题
- 将可拖动元素与从父项位置开始的网格对齐
- 谷歌地图api拖动路线再次回到原来的位置
- 拖动元素时,如何获取要替换的元素的位置
- 如何在javascript中基于谷歌地图上的位置拖动来更改值
- Mootools拖动完成后,获取元素的新位置
- 在放置之前找到拖动对象的位置
- 获取图像可见区域状态,以在画布中将图像设置在先前拖动的位置
- 如何在拖动时使项目恢复到其原始位置
- 微调可拖动 SVG 形状的位置,而无需更改 X
- 可拖动组,不会更改组中的节点位置
- JQuery 可拖动 - 防止网格对象移动到同一位置
- 在拖动/拖放事件上获取 Firefox 内容可编辑的拖放光标位置
- 同步两个可拖动元素的位置
- 跟踪鼠标相对于起始拖动位置HTML5,Ember
- 如何使用jquery在特定位置拖动元素