jQuery:1.9.1
jQuery UI:1.10.1
<td class="my-column" >
<div id="my-div1" class="my-div-class">
<p class="para-item"> para 101 </p>
</div>
</td>
<td>
<div id="my-div1" class="my-div-class">
<p class="para-item"> para 201 </p>
</div>
</td>
<script>
$(".my-div-class").sortable( { connectWith: '.my-div-class' } );
</script>
在小提琴中,当用户尝试将list-1中的顶级项目拖动到list-2的底部时,list-1的滚动条将被移动而不是list-2滚动条。
尝试了各种各样的事情,但无法让它正常工作。任何意见/建议都非常感谢。
谢谢, 勒凯什
答案 0 :(得分:11)
如果您不想更改实际的src文件。作为选项
的一部分,有一个句柄请参阅the fiddle
sort:function(event,uiHash){
var scrollContainer = uiHash.placeholder[0].parentNode;
var overflowOffset = $(scrollContainer).offset();
if((overflowOffset.top + scrollContainer.offsetHeight) - event.pageY < scrollingSensitivity) {
scrollContainer.scrollTop = scrollContainer.scrollTop + scrollingSpeed;
}
else if(event.pageY - overflowOffset.top < scrollingSensitivity) {
scrollContainer.scrollTop = scrollContainer.scrollTop - scrollingSpeed;
}
if((overflowOffset.left + scrollContainer.offsetWidth) - event.pageX < scrollingSensitivity) {
scrollContainer.scrollLeft = scrollContainer.scrollLeft + scrollingSpeed;
}
else if(event.pageX - overflowOffset.left < scrollingSensitivity) {
scrollContainer.scrollLeft = scrollContainer.scrollLeft - scrollingSpeed;
}
}
答案 1 :(得分:1)
查看jquery.ui.sortable.js的_mouseDrag函数//滚动是否在scrollParent上,其中parent是拖动元素的容器。但父母应该是你要放弃的地方的容器。我将滚动更改移到this._contactContainers(event)下面;而不是this.scrollParent [0]。我使用了this.currentContainer.element [0],它为你提供了实际的容器并且工作了..
if(this.scrollParent[0] !== document && this.scrollParent[0].tagName !== "HTML") {
this.overflowOffset = this.currentContainer.element.offset();
var scrollContailer = this.currentContainer.element[0];
if((this.overflowOffset.top + scrollContailer.offsetHeight) - event.pageY < o.scrollSensitivity) {
scrollContailer.scrollTop = scrolled = scrollContailer.scrollTop + o.scrollSpeed;
} else if(event.pageY - this.overflowOffset.top < o.scrollSensitivity) {
scrollContailer.scrollTop = scrolled = scrollContailer.scrollTop - o.scrollSpeed;
}
if((this.overflowOffset.left + scrollContailer.offsetWidth) - event.pageX < o.scrollSensitivity) {
scrollContailer.scrollLeft = scrolled = scrollContailer.scrollLeft + o.scrollSpeed;
} else if(event.pageX - this.overflowOffset.left < o.scrollSensitivity) {
scrollContailer.scrollLeft = scrolled = scrollContailer.scrollLeft - o.scrollSpeed;
}
}
答案 2 :(得分:0)
更简单的解决方案是以下代码:
$("#foo, #bar").sortable({
connectWith: ".foobar",
over: function(event, ui) {
if (ui.sender) {
widget = ui.sender.data("ui-sortable");
widget.scrollParent = $(this);
widget.overflowOffset = $(this).offset();
}
}
});
答案 3 :(得分:0)
可能您的可排序列表重叠垂直。请参阅https://bugs.jqueryui.com/ticket/7065。
只需使用静态维度将可排序列表放在彼此之下。