我有一个包含2列的表,第一列是时间,第二列是class='empty'
,另一个div是class='interview'
,我希望每当用户拖放div时,它的位置就精确地位于td.empty
的顶部被丢弃,并将此td的类更改为occupied
这里是我在做什么的一个样本:
JS Fiddle
不幸的是,到目前为止,我尚无法解决此问题,我们将不胜感激
最佳答案
您可以使用jQuery UI position()
方法,如下所示:
$(document).ready(function() {
$('.interview').draggable({
cursor: 'move',
revert: 'invalid',
})
$('.empty').droppable({
drop: function(ev, ui) {
$(this).removeClass('empty').addClass('occupied');
ui.draggable.position({
my: 'left top',
at: 'left top',
of: this
});
}
})
})
table {
border-collapse: collapse;
border: 1px solid #333;
}
table td {
border: 1px solid #c1a1a1 !important;
}
table .time {
width: 60px;
font-family: 'Calibri'
}
table .empty {
width: 180px;
}
.interview {
border: 1px solid #ddd;
background-color: e1a2c1;
height: 35px;
width: 180px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<table>
<tr>
<td class='time'>09:00</td>
<td class='empty'></td>
</tr>
<tr>
<td class='time'>10:00</td>
<td class='empty'></td>
</tr>
<tr>
<td class='time'>11:00</td>
<td class='empty'></td>
</tr>
<tr>
<td class='time'>12:00</td>
<td class='empty'></td>
</tr>
<tr>
<td class='time'>13:00</td>
<td></td>
</tr>
<tr>
<td class='time'>14:00</td>
<td class='empty'></td>
</tr>
</table>
<div class='interview'>
This test
</div>
关于jquery - 如何将可拖动的div放置在td的顶部,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/34426864/