Drag and Drop + Scroll
Use jQuery UI for drag and drop event, have a look below example, i think that will help you.
$(function() {
$(".sidebar .draggable").draggable({
grid: [ 20, 20 ],
appendTo: '#droppable',
containment: "window",
cursor: 'move',
revertDuration: 100,
revert: 'invalid',
helper: 'clone'
});
$("#droppable").droppable({
accept: ".sidebar .draggable",
drop: function (event, ui) {
ui.helper.clone().appendTo('#droppable');
$(".container .draggable").draggable({
containment:"#droppable"
});
}
});
});
*{ box-sizing:border-box; margin:0; padding:0;}
body {
font-family: sans-serif;
color: #414141;
font-size: 14px;
background:#f9f9f9;
}
.container{
width:100%;
min-height:100vh;
position:relative;
float:left;
display:flex;
}
.sidebar{
width:200px;
float:right;
font-family: sans-serif;
color: #414141;
font-size: 14px;
}
.elements{ padding:5px; border:1px dashed #ccc; margin:5px 0; float:left;}
.sidebar .elements{ width:100%; }
.droppable-div{
width:calc(100% - 250px);
flex:1;
position:relative;
}
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<div class="container">
<div id="droppable" class="droppable-div">
</div>
<div class="sidebar">
<div class="elements draggable">In-Ear Audio Sport Gold</div>
<div class="elements draggable">In-Ear Audio White</div>
<div class="elements draggable">Notarum Black</div>
<div class="elements draggable">Notarum Light Grey</div>
<div class="elements draggable">Notarum Slim Grey</div>
<div class="elements draggable">Notarum Light Grey</div>
<div class="elements draggable">Notarum Slim Grey</div>
<div class="elements draggable">Notarum Slim Black</div>
<div class="elements draggable">Notarum Light Black</div>
<div class="elements draggable">Notarum Slim Grey</div>
<div class="elements draggable">Printer Coloris Express Series</div>
<div class="elements draggable">Pictura Slim</div>
<div class="elements draggable">In-Ear Audio Sport Gold</div>
<div class="elements draggable">In-Ear Audio White</div>
<div class="elements draggable">Notarum Black</div>
<div class="elements draggable">Notarum Light Grey</div>
<div class="elements draggable">Notarum Slim Grey</div>
<div class="elements draggable">Notarum Light Grey</div>
<div class="elements draggable">Notarum Slim Grey</div>
<div class="elements draggable">Notarum Slim Black</div>
<div class="elements draggable">Notarum Light Black</div>
<div class="elements draggable">Notarum Slim Grey</div>
<div class="elements draggable">Printer Coloris Express Series</div>
<div class="elements draggable">Pictura Slim</div>
<div class="elements draggable">In-Ear Audio Sport Gold</div>
<div class="elements draggable">In-Ear Audio White</div>
<div class="elements draggable">Notarum Black</div>
<div class="elements draggable">Notarum Light Grey</div>
<div class="elements draggable">Notarum Slim Grey</div>
<div class="elements draggable">Notarum Light Grey</div>
<div class="elements draggable">Notarum Slim Grey</div>
<div class="elements draggable">Notarum Slim Black</div>
<div class="elements draggable">Notarum Light Black</div>
<div class="elements draggable">Notarum Slim Grey</div>
<div class="elements draggable">Printer Coloris Express Series</div>
<div class="elements draggable">Pictura Slim</div>
</div>
</div>