JQuery Draggable in overflow container
I have a small HTML page where you can drag and drop list items from a div container that has a lot of content so it matters overflow:scroll
(for scrolling it).
As described in the documentation, I have to set the list items scroll: false
if I pull it out of the scrollable container. Only using helper: clone
can drag list items out of the container. But that's not what I want here. appendTo: body
only works with helper:clone
(see here https://api.jqueryui.com/draggable/#option-appendTo ) which I cannot use due to visual feedback ( li
items disappear in the list if added to "breakfast") ...
This is my jQuery code:
$('ul li').draggable({
revert: 'invalid',
zIndex: '10000',
appendTo: 'body',
scroll: false,
start: function(event,ui) {},
stop: function (event,ui) {}
});
And it can be tested at http://jsbin.com/dinaqabipi/4/ . (code: http://jsbin.com/dinaqabipi/4/edit?html,output ).
How to make li containers visible when dragged from an overflow container?
source to share
Your problem is probably related to inline: relative style position. You have to set the position of the drop list item to an absolute value and not drag it to static. Try the following:
#right ul > li {
position: static !important;
}
#right ul > li.ui-draggable-dragging {
position: absolute !important;
}
source to share