In my project, I am looking to organize a container using jQuery UI draggable/droppable feature.
Since the elements in my list are arranged in a straight horizontal line, I have utilized display: flex. This arrangement works well when adding new items to the list.
However, the list may extend beyond the viewport size. As a result, I require scrolling functionality while dragging the elements.
For reference, here is a link to my JSFiddle example: http://jsfiddle.net/r9vc9uyd/
HTML
<div class="mainwrap">
<div class="flexwrap">
<div class="item item--small"><p>Loremlorem</p></div>
<div class="item"><p>Loremlorem</p></div>
...
</div>
</div>
CSS
.mainwrap {
width: 500px;
display: block;
background: yellow;
height: auto;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
}
.flexwrap {
zoom: 1;
display: flex;
...
}
.item {
width: 100px;
margin: 0 5px;
...
}
.item--small {
flex-shrink: 1;
background: mediumvioletred;
width: 50px;
}
Javascript
$("document").ready(function() {
$(".item").draggable({
helper: 'clone',
opacity: 0.8,
scroll: true,
refreshPositions: true,
scrollSensitivity: 100,
});
});