jQuery draggable/droppable div in multiple divs

Question

I want to create a table where each cell can contain an element (div) that can be dragged and dropped in other cells. It seems that the element can be dropped only the origin div. I don't understand why it 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 -->

Answer 1

Your problem is that your target divs have no height. I edited your snippet slightly to use an activeClass so you can see the color. By setting the height & width on td div rather than only .draggable, it works as 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 -->