jQuery Draggable Sortable scroll issue

scroll issue

by ramesh valasa

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css">
<div class="composer">
    <ul>
        <li id="draggable" class="ui-state-highlight">Drag me into list and then back here</li>
    </ul>
</div>
<div class="all-content-holder">
  <div class="all-content-background">
    <div class="all-content">
      <ul id="sortable">
        <li class="ui-state-default">Item 1</li>
        <li class="ui-state-default">Item 2</li>
        <li class="ui-state-default">Item 3</li>
        <li class="ui-state-default">Item 4</li>
        <li class="ui-state-default">Item 5</li>
        <li class="ui-state-default">Item 6</li>
        <li class="ui-state-default">Item 7</li>
        <li class="ui-state-default">Item 8</li>
        <li class="ui-state-default">Item 9</li>
        <li class="ui-state-default">Item 10</li>
        <li class="ui-state-default">Item 11</li>
        <li class="ui-state-default">Item 12</li>
        <li class="ui-state-default">Item 13</li>
        <li class="ui-state-default">Item 14</li>

        <li class="ui-state-default">Item 15</li>
        <li class="ui-state-default">Item 24</li>
        <li class="ui-state-default">Item 34</li>
        <li class="ui-state-default">Item 45</li>
        <li class="ui-state-default">Item 56</li>
        <li class="ui-state-default">Item 66</li>
        <li class="ui-state-default">Item 77</li>
        <li class="ui-state-default">Item 87</li>
        <li class="ui-state-default">Item 97</li>
        <li class="ui-state-default">Item 107</li>
        <li class="ui-state-default">Item 117</li>
        <li class="ui-state-default">Item 127</li>
        <li class="ui-state-default">Item 137</li>
        <li class="ui-state-default">Item 147</li>

        <li class="ui-state-default">Item 9799</li>
        <li class="ui-state-default">Item 107090</li>
        <li...

CSS

html, body { height: 100%; overflow: hidden; }
  body { display: flex; }
  
  ul {
	    list-style-type: none;
	    margin: 0;
	    padding: 0;
	    margin-bottom: 10px;
	}
	li {
	    margin: 5px;
	    padding: 5px;
	    width: 150px;
	}
	.composer {
	    width:200px;
	    background-color:#ccc;
	    font-size:11px;
	    line-height: normal;
	}
	.all-content-holder {
	    height: 100%;
	    overflow: auto;
      position: relative;
	}
	.all-content-background {
	    
	    
	}
	.all-content {
	    position: relative;
	    width: 100%;
	    z-index: 1;
	}

JavaScript

$("#draggable").draggable({
    connectToSortable: "#sortable",
    helper: "clone",
    revert: "invalid", 
    drag: function(ui, event){
      
      
    //  event.helper.scrollParent()

    }
});

$("#sortable").sortable({
   // revert: true,
    
});