Phil Phil - 1 month ago 13
jQuery Question

jQuery UI - Draggable items in overflow-y:scroll container

I have a webpage where I have items on the right which are draggable into columns on the left. Works great, except I want to set a fixed height or max-height on the items container on the right, with overflow-y:scroll applied. When I try to do this, the items drag under the target column instead of on top as it should. If I take the overflow property off the item container div, it works correctly.

Can someone point out where I'm going wrong? How can I get a scrollable draggable list?

JS Fiddle HERE to show what I mean...
https://jsfiddle.net/bvxxetot/

Here is the javascript code I'm using to init the draggable/droppable areas

HTML

<div id="tmpl-view-builder-container">

<div id="tmpl-view-preview-container">
<div class="droppable">


</div>

</div>

<div id="tmpl-view-legend-container">
<h3>Available Fields</h3>
<div id="tmpl-view-legend-item-container">
<ul>
<li>Field 1</li>
<li>Field 2</li>
<li>Field 3</li>
<li>Field 4</li>
<li>Field 5</li>
<li>Field 6</li>
<li>Field 7</li>
<li>Field 8</li>
<li>Field 9</li>
<li>Field 10</li>
</ul>
</div>
</div>

</div>


CSS

.droppable { border:1px dashed #000000; width:75%; float:left; height:400px;}

#tmpl-view-legend-container {
position:absolute;
right:20px;
top:0px;
height:400px;
overflow-y:scroll;
}

#tmpl-view-legend-container ul { list-style-type:none; padding:0; }
#tmpl-view-legend-container ul li { background:#CCCCCC; margin-bottom:10px; padding:7px 10px; cursor:pointer; }


JS

$(function() {
$('.droppable').droppable({
accept:'#tmpl-view-legend-item-container li',
hoverClass: 'hovered',
drop: testDropFunction
});

$('#tmpl-view-legend-item-container li').draggable({
stack: '#tmpl-view-legend-items li',
cursor: 'move',
revert: true,
appendTo: 'body'
});
});


function testDropFunction(event, ui) {
alert('Testing!');
}


thank you!

Answer

You can get this functionality using the helper: 'clone', however you will need to add some code to fix a few things.

In the draggable constructor:

    helper: 'clone',
    start: function(e, ui) {
        ui.helper.width($(this).width());
        $(this).css('visibility', 'hidden');
    },
    stop: function(e, ui) {
        $(this).css('visibility', '');
    }

In the CSS:

li.ui-draggable.ui-draggable-handle.ui-draggable-dragging { list-style-type:none; background:#CCCCCC; margin-bottom:10px; padding:7px 10px; cursor:pointer; }

Here is a working jsfiddle, based on your code:
https://jsfiddle.net/ahx7urbk/