Encountering a challenge with a drag and drop system that utilizes CSS overflow properties to enable vertical scrolling of a list of values. The issue arises when dragging an item between selected and unselected areas, causing the dragged item to disappear outside the overflowed element, regardless of the specific value set.
A demonstration showcasing the problem can be accessed via: https://codepen.io/richardsmorgan/pen/NWYodYy
HTML
<div class="drag-area">
<div class="area">Droppable Area 1</div>
<div class="box">Box1</div>
<div class="box">Box2</div>
</div>
<div class="drag-area">
<div class="area">Droppable Area 2</div>
</div>
<div class="result">-</div>
CSS
.drag-area {
width: 200px;
height: 200px;
background: #fff;
display: inline-block;
overflow-x: visible;
overflow-y: scroll;
vertical-align: top;
position: relative;
margin-left: 30px;
border: 1px solid #ddd;
box-shadow: 3px 3px 6px 3px rgba(0,0,0,0.06)
}
.area {
position:absolute;
margin: 0 auto;
color: #ccc;
font-size: 20px;
bottom: 10px;
left: 20px;
}
.box {
width: 50px;
height: 50px;
background: #673AB7;
color: #fff;
text-align: center;
z-index: 2;
border:2px solid #512DA8;
}
.result {
display: inline-block;
margin-left: 30px;
}
JAVASCRIPT
$( ".box" ).draggable({
scope: 'demoBox',
revertDuration: 100,
start: function( event, ui ) {
//Reset
$( ".box" ).draggable( "option", "revert", true );
$('.result').html('-');
}
});
$( ".drag-area" ).droppable({
scope: 'demoBox',
drop: function( event, ui ) {
var area = $(this).find(".area").html();
var box = $(ui.draggable).html()
$( ".box" ).draggable( "option", "revert", false );
//Display action in text
$('.result').html("[Action] <b>" + box + "</b>" +
" dropped on " +
"<b>" + area + "</b>")
//Realign item
$(ui.draggable).detach().css({top: 0,left: 0}).appendTo(this);
}
})
In search of a solution to address this issue or whether it is fundamentally flawed?