jQuery UI可排序/可拖动导致窗口跳转 [英] jQuery UI Sortable/Draggable causing window jump

问题描述

在我的网页上，我有一个div，其中包含可排序的UL，每当我滚动到页面底部并拖动最后一个LI时，我的页面就会跳转，并且滚动条(在整个窗口上)都会增大.

On my web page I have a div containing a sortable UL, and whenever I scroll to the bottom of my page and drag the last LI my page jumps and the scrollbar (on the entire window) grows.

这里是一个JSFiddle，几乎捕获了我的问题: www.jsfiddle.net/u5afykpf . 要查看发生在我身边的东西，请滚动到底部，然后将最后一个元素向下拖动.您将看到滚动条增长和移动.但是，在我的页面上，那里的内容和高度更多，这会导致窗口发生明显的变化，这是不希望的.如果您转到 jqueryui可拖动演示，请减小窗口高度并拖动最后一个元素，您会发现这种情况不会发生在他们身上.

Here is a JSFiddle that almost captures my issue: www.jsfiddle.net/u5afykpf. To see something close to what is happening to me, scroll to the bottom and drag the last element downwards. You will see the scrollbar grow and shift. On my page however where there is a lot more content and height this causes a shift in the window which is clearly noticeable and undesired. If you go to the jqueryui draggable demo, decrease the window height and drag the last element, you will see that this behavior doesn't happen for them.

有人对jQuery UI可拖动和CSS建议有经验，他们可以给我阻止这种跳跃的发生吗?

Does anybody have experience with jQuery UI draggable and CSS advice they could give me to stop this jump from occurring?

我想做的一件事是给div加上UL position: absolute，但随后就没用了，布局就完全搞砸了.

One thing I thought to do was give the div surrounding the UL position: absolute but then it is out of the flow and the layout gets completely messed up.

推荐答案

很久以前，我就一直在研究这个问题.尝试将以下参数添加到.draggable函数

I stubled across this problem very long time ago. Try adding following parameters to .draggable function

$('.selector').draggable({
    appendTo: 'body',
    containment: 'window',
    scroll: false,
    helper: 'clone'
});

这篇关于jQuery UI可排序/可拖动导致窗口跳转的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！