如何解决jQueryUI 拖放排序遇到滚动条时有可能无法执行排序的小bug?以下是解决方案:
问题描述
在使用jQueryUI的sortable插件实现拖放排序时,当排序列表的高度超过容器的高度时,容器会出现纵向滚动条。此时,如果将拖拽元素往容器底部拖动,当拖动到容器底部超出可视范围时,容器会自动向下滚动,但是Sortable并没有正确计算滚动后鼠标所在位置,导致拖拽元素移动不了。
解决方案
方案一:
目前已知的解决该问题的一种方案是通过设置scrollSensitivity
参数的值,使sortable在移动拖拽元素时能够正确计算鼠标位置,从而解决无法拖动的问题。
scrollSensitivity
参数的作用是设置拖动元素离容器边缘的距离多少时,容器开始滚动。
示例一:
<div class="container">
<ul class="sortable">
<li>item 1</li>
<li>item 2</li>
<!-- ... -->
</ul>
</div>
<script>
$(document).ready(function () {
$('.sortable').sortable({
axis: 'y',
scroll: true,
scrollSensitivity: 100, // 设置scrollSensitivity的值
// ...其他配置...
});
});
</script>
在示例一中,我们设置了scrollSensitivity
参数的值为100,即拖拽元素距离容器底部不足100像素时,容器开始向下滚动。在实际使用中,需要根据实际情况调整该参数的值。
方案二:
另外一种解决该问题的思路是通过在鼠标拖拽到容器底部时,通过JavaScript代码模拟鼠标滚动事件,从而实现容器的自动滚动。
scrollTop
属性表示容器顶端距离容器内部滚动条顶端的距离。scrollHeight
属性表示容器的总高度,包括不可见部分的高度。
示例二:
<div id="container">
<ul class="sortable">
<li>item 1</li>
<li>item 2</li>
<!-- ... -->
</ul>
</div>
<script>
$(document).ready(function () {
$('#container').on('mousemove', function (e) {
var container = $(this),
sortable = $('.sortable', container),
scrollTop = container.scrollTop(),
scrollHeight = container.prop('scrollHeight'),
containerHeight = container.height(),
mouseY = e.clientY - container.offset().top;
if (mouseY > containerHeight - 20 && scrollTop + containerHeight < scrollHeight) {
container.scrollTop(scrollTop + 20); // 模拟鼠标向下滚动20px
}
});
$('.sortable').sortable({
axis: 'y',
// ...其他配置...
});
});
</script>
在示例二中,我们通过jQuery为容器绑定了mousemove
事件,在鼠标移动到容器底部时模拟了鼠标向下滚动20像素的操作,从而实现了容器的自动滚动。但是我们需要注意的是,在鼠标移出容器后需要解除绑定的事件,以免影响其他操作。
以上就是解决jQueryUI 拖放排序遇到滚动条时无法执行排序的小bug的完整攻略,希望能对大家有所帮助。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:jQueryUI 拖放排序遇到滚动条时有可能无法执行排序的小bug及解决方案 - Python技术站