JSFiddle - React, Tailwind, and code Playground

by Nathan Kern

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>
<div id="userList" class="container">
    <div class="moveMe">Move me 1</div>
    <div class="moveMe">Move me 2</div>
    <div class="moveMe">Move me 3</div>
    <div class="moveMe">Move me 4</div>
    <div class="moveMe">Move me 5</div>
    <div class="moveMe">Move me 6</div>
    <div class="moveMe">Move me 7</div>
</div>
<div id="header" class="container">I am a Header!</div>
<div id="dropZoneCon" class="container"> I am a dropZone container
    <div id="dropZone">
    <h1>
    dropZone
    </h1>
    </div>
    </div>
</div>

CSS

.container {
    outline-style: solid;
    outline-color: black;
    outline-width: 3px;
    height: 100px;
    width: 100px;
}
.moveMe {
    outline-style: solid;
    outline-color: blue;
    outline-width: 2px;
    height: 20px;
    width: 100px;
    background-color: ghostwhite;
}
#header{
  width: 100%;
}
#userList{
    background-color: #D14836;
    height: 300px;
    position: fixed;
    right: 5px;
    top: 5px;
    overflow: auto;
    width: 20%;
}
#dropZoneCon{
    width: 80%;  
    height:200px;
    overflow: hidden;
}
#dropZone{
    width: 150%;
    height: 150%;
    overflow: hidden;
}

JavaScript

$(document).ready(function () {
    $('.moveMe').draggable({
        helper: "clone",
        appendTo: '#dropZone',
        revert: 'invalid',
        scroll: "true",
        start: function(ui, event){
        ui.helper.detach().clone().appendTo($("#dropZone"));
            console.log(ui.helper);
         //   $("#dropZoneCon").css("overflow", "hidden");
          //  console.log(ui.helper.parent());
        }
        
    });
    $('#dropZone').droppable({
        accept: '.moveMe',
        //here is where my problem arrises
        // I need #dropZoneCon to scroll to place 
        
        over: function (event, ui) {
         $("#dropZoneCon").css("overflow", "auto")
      //      ui.helper.detach().appendTo($(this));
            console.log($("#dropZone").css("overflow"));
       //     $('#dropZone').css('position','absolute');
         ui.draggable.draggable('option', 'containment', 'parent');
          ui.draggable.draggable('option', 'parent');
        },
    /*    */
        drop: function (event, ui) {
           
       
            //ui.helper.detach().clone().appendTo($("#dropZone"));
       //     $('#dropZone').css('position','absolute');
       //     ui.draggable.draggable('option', 'containment', 'parent');
        },
    });
    
});