scroll issue

by ramesh valasa

HTML

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<body>


<div class="container">
  <div class="sortable-container">
    <div class="sortable-item">Sortable item 1</div>
    <div class="sortable-item">Sortable item 2</div>
    <div class="sortable-item">Sortable item 3</div>
    <div class="sortable-item">Sortable item ...</div>
    <div class="sortable-item">Sortable item ...</div>
    <div class="sortable-item">Sortable item ...</div>
    <div class="sortable-item">Sortable item ...</div>
    <div class="sortable-item">Sortable item ...</div>
    <div class="sortable-item">Sortable item ...</div>
    <div class="sortable-item">Sortable item ...</div>
    <div class="sortable-item">Sortable item ...</div>
    <div class="sortable-item">Sortable item ...</div>
  </div>

  <div>
    <div> some thing here</div>
    <div class = "draggable-container"> 
      <div class="draggable-item">Draggable item 1</div>
      <div class="draggable-item">Draggable item 2</div>
      <div class="draggable-item">Draggable item 3</div>
      <div class="draggable-item">Draggable item 4</div>
      <div class="draggable-item">Draggable item 5</div>
      <div class="draggable-item">Draggable item ...</div>
      <div class="draggable-item">Draggable item ...</div>
      <div class="draggable-item">Draggable item ...</div>
      <div class="draggable-item">Draggable item ...</div>
      <div class="draggable-item">Draggable item ...</div>
      <div class="draggable-item">Draggable item ...</div>
      <div class="draggable-item">Draggable item ...</div>
    </div>
  </div>
</div>
 
</body>

CSS

.container { display: flex;margin-top: 100px;}
  .sortable-container {border: 1px solid green; padding: 5px; margin: 12px; height: 150px; overflow-y: auto;}
  .draggable-container {margin-top: 20px;border: 1px solid red; padding: 5px; margin: 10px;height: 150px; overflow-y: auto;
  position: relative;}
  .sortable-item { width: 150px; border: 1px dotted; margin: 2px;cursor: pointer;}
  .draggable-item { width: 200px; border: 1px dotted; margin: 5px;cursor: pointer;}

JavaScript

$( function() {
    $( ".sortable-container" ).sortable({
      sort: function(event, ui ){
      
    var dragelY = event.offsetY;
    var conEl = $('.sortable-container').height();
    
    
      }
    });
    
    $( ".draggable-item" ).draggable({
      connectToSortable: ".sortable-container",
    helper: 'clone',
      scroll: false,
      drag: function(event, ui){
   
   
      }
      
    });
    
  } );