jQuery draggable/droppable div 在多个 div 中
jQuery draggable/droppable div in multiple divs
我想创建一个 table,其中每个单元格都可以包含一个可以拖放到其他单元格中的元素 (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 -->
你的问题是你的目标 div
没有高度。我稍微编辑了您的代码片段以使用 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 -->
我想创建一个 table,其中每个单元格都可以包含一个可以拖放到其他单元格中的元素 (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 -->
你的问题是你的目标 div
没有高度。我稍微编辑了您的代码片段以使用 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 -->