多个 div 中的 jQuery 可拖动/可拖放 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

您的问题是您的目标divs 没有高度。我稍微编辑了您的 sn-p 以使用 activeClass 以便您可以看到颜色。通过在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 -->