jQuery UI：可拖动滚动问题
我正在尝试使用jQuery UI构建一个可拖动/可放置的文件夹文件视图，但我遇到了一个问题，我相信它归功于帮助器。 这是我的代码：
HTML
Parent Directory 1
Parent Directory 2 Folder 1 Folder 2 Folder 3 jQuery
$(document).ready(function () { var opts = { helper: 'clone', appendTo: 'body' //appendTo: '#container' }; $('div.drag').each(function () { $(this).draggable(opts); }); $('.dropzone, #topContainer').droppable({ drop: function (e, ui) { var clone = $(ui.draggable).clone(); clone.draggable(opts); $(this).siblings('.folder').children('.drop').append(clone); $(this).removeClass('over'); }, over: function (e, ui) { $(this).addClass('over'); }, out: function (e, ui) { $(this).removeClass('over'); } }); });
CSS
.dropzone { height: 300px; width: 100px; border: 1px solid black; } .drag { clear: both; height: 50px; width: 80px; background-color: black; position: relative; cursor: pointer; } #topContainer, .dropzone { height: 50px; width: 300px; border: 2px solid black; text-align: center; } .folder .drag { margin: 5px; } .container { border: 2px solid blue; margin: 10px; } .over { background-color: yellow; } #container { width: 800px; height: 600px; overflow-y: scroll; border-color: red; position: relative; }
小提琴 ： jsFiddle
所以想法是……你将其中一个黑色块拖到所需的文件夹（父目录1，父目录2，文件夹1等）。 这一切似乎都很好。
什么不好用的是父（#container）或正文有溢出。 如果你点击一个块来拖动并尝试鼠标滚动滚动，你就不能……或者如果你继续尝试，你有时可以。 （我的屏幕分辨率并不明显，但在小提琴代码中，有一个#container元素的滚动条）我假设这与我追加帮助的地方的焦点有关。
因为我开始考虑后者，所以我开始将帮助器附加到不同的位置。 由于#container是我最感兴趣的区域，我可以在那里附加帮助器并使滚动工作得很好（取消注释// appendTo：’＃container’并注释掉appendTo：’body’）。
然而，这引入了另一个问题。 现在我正在追加#container元素，当它被拖动到Parent Directory 1文件夹时，我的块无法被看到，这让我相信帮助器有问题。
果然，如果你没有用户帮助：’克隆’ ，你可以精美地滚动。 这不是一个选项，因为我喜欢在那里使用我的克隆。 所以我转向你们。 我该如何解决我的问题，究竟是怎么回事？ 有人有建议吗？ 我很乐意听到它。
我还注意到我已经尝试为draggable设置zIndex和堆栈选项，但是没有去。 我假设我必须制作一个自定义辅助函数，并让它知道它当前被拖过的东西……但我希望有一个更容易修复。
如果有人有任何见解，我很乐意听到。 谢谢！
下面是一个小提琴的代码： http ： //jsfiddle.net/crowjonah/Fr7u8/3/
HTML：
drag me drag me drag me drag me
- drop here
- drop here
- drop here
- drop here
- drop here
- drop here
- drop here
- drop here
- drop here
- drop here
jQuery的：
$('.drag_me').draggable({ helper: 'clone', scroll: 'true', refreshPositions: true }); $('.drop_on_me').droppable({ accept: '.drag_me', activeClass: 'active', hoverClass: 'hover', tolerance: 'pointer' }); $('.upper').droppable({ over: function(event, ui){ $('.drop_area').autoscroll({ direction: 'up', step: 150, scroll: true }); }, out: function(event, ui){ $('.drop_area').autoscroll('destroy'); } }); $('.lower').droppable({ over: function(event, ui){ $('.drop_area').autoscroll({ direction: 'down', step: 150, scroll: true }); }, out: function(event, ui){ $('.drop_area').autoscroll('destroy'); } });
与此问题相关： jQuery UI：可拖动滚动问题
它是一个带有overflow: scroll的容器内可拖动元素的工作示例