DND - APPENDTO - NICE

by bizamajig

HTML

<script src="https://code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script>
When I am dragging an element from one of the "container A" near the border of the "container B", I implemented an auto-scroll behaviour to navigate in my table to reach any cells. But, after the scroll simulation, the `hoverClass` is not apply to the right cell. However, the element is always dropped into the right cell.
<br><br><br><br>
CONTAINERS A
<br>
<div id="container2" class="container2">
      <table id="t">
        <tr>
        <td id="cell-1">    
          <div id="drag-1" class="cartridge">TEST</div>
          <div id="drag-2" class="cartridge">TEST</div>
          <div id="drag-3" class="cartridge">TEST</div>
          <div id="drag-4" class="cartridge">TEST</div>
          <div id="drag-5" class="cartridge">TEST</div>
          <div id="drag-6" class="cartridge">TEST</div>
          <div id="drag-7" class="cartridge">TEST</div>
          <div id="drag-8" class="cartridge">TEST</div>  
        </td>
        </tr>
    </table>          
</div>

<div id="container3" class="container2">
      <table id="t">
        <tr>
        <td id="cell-1">    
          <div id="drag-1" class="cartridge">TEST</div>
          <div id="drag-2" class="cartridge">TEST</div>
          <div id="drag-3" class="cartridge">TEST</div>
          <div id="drag-4" class="cartridge">TEST</div>
          <div id="drag-5" class="cartridge">TEST</div>
          <div id="drag-6" class="cartridge">TEST</div>
          <div id="drag-7" class="cartridge">TEST</div>
          <div id="drag-8" class="cartridge">TEST</div>            
        </td>
        </tr>
    </table>
</div>


<div id="container" class="container">
    CONTAINER B
      <table id="t">
        <tr>
        <td class="row-title">Row 1</td> 
        <td id="cell-1">    
          <div id="drag-1" class="cartridge">TEST</div>
          <div id="drag-2" class="cartridge">TEST</div>
          <div id="drag-3" class="cartridge">TEST</div>
        ...

CSS

table td{
    background-color:blue;
    min-width:50px;
    height:200px;
    max-height:100px;
    overflow:auto;
    
}

.cell-highlght{
    background-color:green;
}

.cell-dropped{
    background-color:red;
}

.cartridge{
    height:40px;
    width:40px;
    background-color:yellow;
    border:2px red solid;
    margin:5px;
}
  
  .container{
    height: 400px;
    width:400px;
    overflow-x:scroll;
    overflow-y:scroll;
    border:2px red solid;
    position: relative;
    display:inline-block;
  }

  .container2{
    height: 400px;
    overflow-x:hidden;
    overflow-y:scroll;
    border:2px red solid;
    position: relative;
    background-color:tomato; 
    display:inline-block;
  }
  
  .row-title{
    background-color:grey; 
  }

JavaScript

$('[id^="cell-"]').each(function(index) {
    $(this).droppable({
        accept: ".cartridge",
        hoverClass: "cell-highlght",
        tolerance: "pointer",
        drop: function(event, ui) {
            $(this).addClass("cell-dropped");
            $(ui.draggable).appendTo(this);
        }
    });
});

var scrollableContainer= $('#container');
var offset = scrollableContainer.offset();
var offsetWidth = offset.left + scrollableContainer.width();
var offsetHeight = offset.top + scrollableContainer.height();

var intRightHandler = null;
var intLeftHandler = null;
var intTopHandler= null;
var intBottomHandler= null;

var distance = 70;
var timer = 100;
var step = 10;

function clearInetervals()
{
    clearInterval(intRightHandler);
    clearInterval(intLeftHandler);
    clearInterval(intTopHandler);
    clearInterval(intBottomHandler);    
}

$('[id^="drag-"]').each(function() {
    $(this).draggable({
        opacity: 0.7,
        helper: 'clone',
        appendTo: 'body',
        containment: 'body',        
        scroll: true,
        stop: function(){clearInetervals(); },  
        drag : function(e){            
            var isMoving = false;
            
            //Left
            if(((e.pageX - offset.left) <= distance)
                    &&(e.pageX > offset.left))
            {
                isMoving = true;
                clearInetervals();            
                intLeftHandler= setInterval(function(){
                    scrollableContainer.scrollLeft(scrollableContainer.scrollLeft() - step)
                },timer);
                console.log('left');   
            }

            //Right
            if((e.pageX >= (offsetWidth - distance))
                    &&(e.pageX < offsetWidth))
            {
                isMoving = true;
                clearInetervals();            
                intRightHandler = setInterval(function(){
                    scrollableContainer.scrollLeft(scrollableContainer.scrollLeft() + step)
  ...