jQuery UI:可拖动滚动问题

但是，这带来了另一个问题.现在，我要附加到#container元素，将其拖动到 Parent Directory 1 文件夹中时看不到我的代码块，这使我相信helper出了点问题.当然，如果您不使用 helper:'clone'，则可以轻松滚动.这不是一个选择，因为我喜欢在那里存放克隆文件.所以我转向所有人.我该如何解决我的问题，究竟发生了什么?有人有建议吗?我很想听听.还要注意，我已经尝试为可拖动对象设置了zIndex和stack选项，但没有成功.我假设我必须创建一个自定义的辅助函数，并使它知道当前正在拖动的内容...但是我希望有一个更简单的修复程序.如果有人有任何见识，我很想听听.谢谢！解决方案从小提琴中获取代码: http://jsfiddle.net/crowjonah/Fr7u8/3/ HTML: <table><tr class="drag_me"> <td>drag me</td></tr><tr class="drag_me"> <td>drag me</td></tr><tr class="drag_me"> <td>drag me</td></tr><tr class="drag_me"> <td>drag me</td></tr></table><div class="upper"></div><div class="drop_area"><ul> <li class="drop_on_me">drop here</li> <li class="drop_on_me">drop here</li> <li class="drop_on_me">drop here</li> <li class="drop_on_me">drop here</li> <li class="drop_on_me">drop here</li> <li class="drop_on_me">drop here</li> <li class="drop_on_me">drop here</li> <li class="drop_on_me">drop here</li> <li class="drop_on_me">drop here</li> <li class="drop_on_me">drop here</li></ul></div><div class="lower"></div> 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 的容器内可拖动元素的工作示例I'm trying to build a draggable/droppable folder-file view with jQuery UI, but I'm running into a problem with, what I believe is attributed to the helper. Here is my code:The HTML<body> <div id="topContainer"> <span>Parent Directory 1</span> </div> <span id="topFolder" class="folder"> <div class="drop"> </div> </span> <hr /> <div id="container" class="container"> <div class="dropzone"> <span>Parent Directory 2</span> </div> <div id="cont1" class="container"> <div class="dropzone"> <span>Folder 1</span> </div> <span id="folder1" class="folder"> <div class="drop"> <div class="drag"> </div> <div class="drag"> </div> <div class="drag"> </div> <div class="drag"> </div> <div class="drag"> </div> <div class="drag"> </div> <div class="drag"> </div> <div class="drag"> </div> <div class="drag"> </div> <div class="drag"> </div> <div class="drag"> </div> <div class="drag"> </div> </div> </span> </div> <div id="cont2" class="container"> <div class="dropzone"> <span>Folder 2</span> </div> <span id="folder2" class="folder"> <div class="drop"> </div> </span> </div> <div id="cont3" class="container"> <div class="dropzone"> <span>Folder 3</span> </div> <span id="folder3" class="folder"> <div class="drop"> </div> </span> </div> <span id="mainFolder" class="folder"> <div class="drop"> <div class="drag"> </div> </div> </span> </div></body>The 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'); } });});The 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;}The Fiddle: jsFiddleSo the idea is... you drag one of the black blocks to the desired folder (Parent Directory 1, Parent Directory 2, Folder 1, etc.). That all seems to work fine.What doesn't work fine is when the parent (#container) or body have an overflow. If you click on a block to drag and try to mousewheel scroll, you can't... or if you keep trying, you sometimes can. (It's not obvious with my screen resolution, but in the Fiddle code, there is a scrollbar for the #container element) I'm assuming this has something to do with the focus of where I'm appending the helper to.Because I started thinking the latter, I started appending the helper to different locations. With #container being the area I'm most interested in, I can append the helper there and get the scroll to work just fine (uncomment //appendTo: '#container' and comment out the appendTo: 'body').However, this introduces another problem. Now that I'm appending to the #container element, my block cannot be seen when it is dragged to the Parent Directory 1 folder, which lead me to believe that there is just something wrong with helper.Sure enough, if you don't user helper: 'clone', you can scroll just beautifully. This is not an option because I like having my clone there. So I turn to y'all. How can I fix my problem, and what exactly is going on? Does anyone have any advice? I'd love to hear it.It's also good to note that I've tried setting the zIndex and stack options for the draggable, but no go. I'm assuming I'll have to make a custom helper function, and make it aware of what it's currently being dragged over... but I'm hoping there's an easier fix.If anyone has any insight, I'd love to hear it. Thanks! 解决方案 Heres a code from a fiddle: http://jsfiddle.net/crowjonah/Fr7u8/3/HTML:<table><tr class="drag_me"> <td>drag me</td></tr><tr class="drag_me"> <td>drag me</td></tr><tr class="drag_me"> <td>drag me</td></tr><tr class="drag_me"> <td>drag me</td></tr></table><div class="upper"></div><div class="drop_area"><ul> <li class="drop_on_me">drop here</li> <li class="drop_on_me">drop here</li> <li class="drop_on_me">drop here</li> <li class="drop_on_me">drop here</li> <li class="drop_on_me">drop here</li> <li class="drop_on_me">drop here</li> <li class="drop_on_me">drop here</li> <li class="drop_on_me">drop here</li> <li class="drop_on_me">drop here</li> <li class="drop_on_me">drop here</li></ul></div><div class="lower"></div>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'); } });Related to this question: jQuery UI: Draggable Scroll IssueIts a working example of a dragable element inside a container with overflow: scroll 这篇关于jQuery UI:可拖动滚动问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！上岸，阿里云！