多个div中的jQuery draggable / droppable div

Question

我想创建一个表，其中每个单元格可以包含一个元素（div），可以在其他单元格中拖放。 似乎元素只能被删除原点div。 我不明白为什么它不起作用。

<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

您的问题是您的目标div没有高度。我稍微编辑了您的代码段以使用activeClass，以便您可以看到颜色。通过设置高度和＆amp; td div上的宽度而非.draggable的宽度，按预期工作。

$(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 -->