table - jquery draggable/droppable div in multiple divs -

i want create table each cell can contain element (div) can dragged , dropped in other cells. seems element can dropped origin div. don't understand why doesn't work.

<style>    .over {   border: solid 4px #acfa58; } .draggable {     border: solid 4px red;     width:150px;     height:75px; } #timetable{     margin-top:50px;     width:100%;     border-collapse:collapse;     border: 1px solid black; } #timetable th{     text-align:center; } #timetable td{     width:150px;     height:75px;     border: 1px solid black; } </style>   <script> $(document).ready(function() {     $(".draggable").draggable({          cursor: "crosshair",          revert: "invalid"     });      $(".drop").droppable({          accept: ".draggable",          drop: function(event, ui) {             console.log("drop");             $(this).removeclass("border").removeclass("over");             var dropped = ui.draggable;             var droppedon = $(this);             $(dropped).detach().css({top: 0,left: 0}).appendto(droppedon);             },          over: function(event, elem) {             $(this).addclass("over");             console.log("over");         },         out: function(event, elem) {             $(this).removeclass("over");         }     });      $(".drop").sortable(); }); </script>  <div id="page-wrapper">     <table id="timetable" >             <thead>                 <tr>                     <th>1</th>                     <th>2</th>                     <th>3</th>                     <th>4</th>                     <th>5</th>                     <th>6</th>                     <th>7</th>                 </tr>             </thead>             <tbody id="containment">                 <tr>                     <td><div class="drop"><div class="draggable"></div></div></td>                     <td><div class="drop"></div></td>                     <td><div class="drop"></div></td>                     <td><div class="drop"></div></td>                     <td><div class="drop"></div></td>                     <td><div class="drop"></div></td>                     <td><div class="drop"></div></td>                 </tr>                 <tr>                     <td><div class="drop"></div></td>                     <td><div class="drop"></div></td>                     <td><div class="drop"></div></td>                     <td><div class="drop"></div></td>                     <td><div class="drop"></div></td>                     <td><div class="drop"></div></td>                     <td><div class="drop"></div></td>                 </tr>             </tbody>         </table> </div><!-- /#page-wrapper --> 

your problem target divs have no height. edited snippet use activeclass can see color. setting height & width on td div rather .draggable, works expected.

$(document).ready(function() {      $(".draggable").draggable({           cursor: "crosshair",           revert: "invalid"      });        $(".drop").droppable({           accept: ".draggable",           activeclass: "over",          drop: function(event, ui) {              console.log("drop");              $(this).removeclass("border").removeclass("over");              var dropped = ui.draggable;              var droppedon = $(this);              $(dropped).detach().css({top: 0,left: 0}).appendto(droppedon);              }      });        $(".drop").sortable();  });

.over {    border: solid 4px #acfa58;  }  td div {    width:150px;    height:75px;  }  .draggable {    border: solid 4px red;  }  #timetable{    margin-top:50px;    width:100%;    border-collapse:collapse;    border: 1px solid black;  }  #timetable th{    text-align:center;  }  #timetable td{    width:150px;    height:75px;    border: 1px solid black;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>    <div id="page-wrapper">      <table id="timetable" >              <thead>                  <tr>                      <th>1</th>                      <th>2</th>                      <th>3</th>                      <th>4</th>                      <th>5</th>                      <th>6</th>                      <th>7</th>                  </tr>              </thead>              <tbody id="containment">                  <tr>                      <td><div class="drop"><div class="draggable"></div></div></td>                      <td><div class="drop"></div></td>                      <td><div class="drop"></div></td>                      <td><div class="drop"></div></td>                      <td><div class="drop"></div></td>                      <td><div class="drop"></div></td>                      <td><div class="drop"></div></td>                  </tr>                  <tr>                      <td><div class="drop"></div></td>                      <td><div class="drop"></div></td>                      <td><div class="drop"></div></td>                      <td><div class="drop"></div></td>                      <td><div class="drop"></div></td>                      <td><div class="drop"></div></td>                      <td><div class="drop"></div></td>                  </tr>              </tbody>          </table>  </div><!-- /#page-wrapper -->