DND - APPENDTO - VERTICAL MOBILE APP - BIZ USAGE

by bizamajig

HTML

Solution to be able to move element to all container with auto-scroll behaviour for the container B

<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>
          <div id="drag-4" class="cartridge">TEST</div>

          </td>
        <td id="cell-2"></td>
        <td id="cell-3"></td>
        <td  id="cell-7"></td>
        <td  id="cell-8"></td>
        <td  id="cell-9"></td> 
        <td  id="cell-7"></td>
        <td  id="cell-8"></td>
        <td ...

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);
        }
    });
});

$('[id^="drag-"]').each(function() {
    $(this).draggable({
        opacity: 0.7,
        cursorAt: { top: 15, left: 50 },//Default
        helper: function(){
           $('#container').append('<div id="clone" class="cartridge">' + $(this).html() + '</div>');    
          //Hack to append the cartridge to the body (visible above others divs), but still bellonging to the scrollable container  
            $("#clone").hide();
            setTimeout(function(){$('#clone').appendTo('body'); $("#clone").show();},1);
            return $("#clone");
        },
        appendTo: 'body',
        containment: 'body',        
        scroll: true     
    });
});