JQuery draggable: scroll not working when helper: clone is used
Try wrapping your overflow div with a div with position: relative; and adding position: relative; to your overflow div.
<div style="position: relative;">
<div style="position:relative; background-color: red; width: 500px; height: 100px; overflow: auto;">
<table id="nfTable" class="treeTable">
<tr><td><span class="parent initialized expanded">drop here</span></td></tr>
<tr><td><span class="draggable">drag me</span></td></tr>
<tr><td><span class="draggable">drag me</span></td></tr>
<tr><td><span class="draggable">drag me</span></td></tr>
<tr><td><span class="droppable">drop here</span></td></tr>
<tr><td><span class="droppable">drop here</span></td></tr>
<tr><td><span class="draggable">drag me</span></td></tr>
<tr><td><span class="draggable">drag me</span></td></tr>
<tr><td><span class="draggable">drag me</span></td></tr>
<tr><td><span class="draggable">drag me</span></td></tr>
<tr><td><span class="droppable">drop here</span></td></tr>
<tr><td><span class="droppable">drop here</span></td></tr>
<tr><td><span class="droppable">drop here</span></td></tr>
<tr><td><span class="droppable">drop here</span></td></tr>
</table>
</div>
</div>
Chris Williams
Senior Software Architect experienced with building mobile, web, and server-side software applications. Proficient with the use of agile design methodologies to build complex applications while able to lead teams and effectively communicate and discuss technical solutions with key stakeholders.
Updated on June 04, 2022Comments
-
Chris Williams almost 2 years
I have a folder list type of situation where I can drag items from one folder to another using jquery draggable/droppable. Folder items are draggable and folders are droppable. These are in a div that is small enough to show a vertical scroll bar.
I have "scroll: true" set on the draggable items so that they can cause the div to scroll. When I also use 'helper: "clone"' on the draggable items, the scrolling no longer works.
What am I doing wrong?
Here's some very simplified code:
<div style="background-color: red; width: 500px; height: 100px; overflow: auto;"> <table id="nfTable" class="treeTable"> <tr><td><span class="parent initialized expanded">drop here</span></td></tr> <tr><td><span class="draggable">drag me</span></td></tr> <tr><td><span class="draggable">drag me</span></td></tr> <tr><td><span class="draggable">drag me</span></td></tr> <tr><td><span class="droppable">drop here</span></td></tr> <tr><td><span class="droppable">drop here</span></td></tr> <tr><td><span class="draggable">drag me</span></td></tr> <tr><td><span class="draggable">drag me</span></td></tr> <tr><td><span class="draggable">drag me</span></td></tr> <tr><td><span class="draggable">drag me</span></td></tr> <tr><td><span class="droppable">drop here</span></td></tr> <tr><td><span class="droppable">drop here</span></td></tr> <tr><td><span class="droppable">drop here</span></td></tr> <tr><td><span class="droppable">drop here</span></td></tr> </table> </div> <script type="text/javascript" src="/js/jquery-1.3.2.min.js"></script> // draggable and droppable in here: <script type="text/javascript" src="/js/jquery-ui-1.7.2.custom.min.js"></script> <script type="text/javascript"> $(function() { $(".draggable").draggable({ // commenting the line below will make scrolling while dragging work helper: "clone", scroll: true, revert: "invalid" }); $(".droppable").droppable({ accept: ".draggable", drop: function(e, ui) { // todo } }); }); </script>
-
Chris Williams over 14 yearsThat worked but only needed to add position:relative to the one div. Didn't need the surrounding div.
-
musashiXXX about 13 yearsI second this. The "container" div didn't need position:relative in my situation either. Thanks!
-
Marek Teuchner about 6 yearsI can confirm this solution works flawlessly. Been trying to fix this for hours. The outer wrapper is not necessary.