对于未来的读者,我遇到了类似的问题,即在引导对话框的滚动 div 内拖动时,辅助元素有偏移。当释放拖动的对象时,动画将拖动的辅助元素发送到它的新位置,而不考虑页面的滚动部分,这给用户带来了令人困惑的反馈。
为了让事情在对话容器中使用 position:relative 和 overflow-y:auto ,我的解决方案是
1- 在排序开始事件中将 scrollTop() 偏移量添加到辅助对象的边距顶部;
2-在 beforeStop 事件中删除 margin-top
这修复了拖动后动画关闭的问题,但是在页面中的滚动部分拖动时,辅助对象被推到光标下方。最后的修复是
3- 在相对于指针和容器偏移量拖动(使用排序事件)时计算并设置帮助器对象的顶部属性。
$(...).sortable({
...
start: function (event, ui) {
ui.helper.css('margin-top', $("#mybootstrap-dialog").scrollTop());
},
beforeStop: function (event, ui){
ui.helper.css('margin-top',0);
},
sort: function(event, ui) {
var top = event.clientY - $('#my-sortable-ul').offset().top - $("#mybootstrap-dialog").scrollTop();
ui.helper.css({'top' : top + 'px'});
}
},
...
});
帮助这有帮助