本文介绍了Jquery Drag-Drop(将元素放入)的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
< table>
< tr>
< td class =weekday> Sun< / td>
< td class =weekday> Mon< / td>
< td class =weekday> Tue< / td>
< td class =weekday> Wed< / td>
< td class =weekday> Thu< / td>
< td class =weekday> Fri< / td>
< td class =weekday> Sat< / td>
< / tr>
< tr>
< td class =droppable>& nbsp;< / td>
< td class =droppable>& nbsp;< / td>
< td class =droppable>& nbsp;< / td>
< td class =droppable>& nbsp;< / td>
< td class =droppable>& nbsp;< / td>
< td class =droppable>& nbsp;< / td>
< td class =droppable>& nbsp;< / td>
< / tr>
< / table>
< div class =draggable> Drag Me< / div>
放下,如何确定div被放入哪一天?
解决方案
如果您将工作日
单元格可以下载,那么会更容易不得不计算当前下降单元格的索引,并查找星期几单元格的内容。
另外,我想你需要给单元格在CSS中的宽度和高度。
这似乎是你想要的,由:
< style type =text / CSS>
td {
width:4em;
height:4em;
margin:3px;
}
td.weekday {
background:#fcc;
}
td.droppable {
background:#ccf;
}
div.draggable {
background:#cfc;
padding:1em;
width:10em;
}
< / style>
< table>
< tr>
< td class =weekday> Sun< / td>
< td class =weekday> Mon< / td>
< td class =weekday> Tue< / td>
< td class =weekday> Wed< / td>
< td class =weekday> Thu< / td>
< td class =weekday> Fri< / td>
< td class =weekday> Sat< / td>
< / tr>
< / table>
< div class =draggable> Drag Me< / div>
< script src =http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js>< / script>
< script src =http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js>< / script>
< script type =text / javascript>
$(。draggable)。draggable();
$(。weekday)。droppable({
drop:function(){
alert($(this).text());
}
});
< / script>
I am trying to detect which cell an object is being dropped into.
<table>
<tr>
<td class="weekday">Sun</td>
<td class="weekday">Mon</td>
<td class="weekday">Tue</td>
<td class="weekday">Wed</td>
<td class="weekday">Thu</td>
<td class="weekday">Fri</td>
<td class="weekday">Sat</td>
</tr>
<tr>
<td class="droppable"> </td>
<td class="droppable"> </td>
<td class="droppable"> </td>
<td class="droppable"> </td>
<td class="droppable"> </td>
<td class="droppable"> </td>
<td class="droppable"> </td>
</tr>
</table>
<div class="draggable">Drag Me</div>
On drop, how do I determine which day the div was dropped into?
解决方案
It'd be a lot easier if you made the weekday
cells droppable — then you don't have to calculate the index of the current dropped cell and look up the contents of the day-of-the-week cell.
Also, I think you need to give the cells a width and height in the CSS.
This seems to do what you want, courtesy of the jQuery UI docs:
<style type="text/css">
td {
width: 4em;
height: 4em;
margin: 3px;
}
td.weekday {
background: #fcc;
}
td.droppable {
background: #ccf;
}
div.draggable {
background: #cfc;
padding: 1em;
width: 10em;
}
</style>
<table>
<tr>
<td class="weekday">Sun</td>
<td class="weekday">Mon</td>
<td class="weekday">Tue</td>
<td class="weekday">Wed</td>
<td class="weekday">Thu</td>
<td class="weekday">Fri</td>
<td class="weekday">Sat</td>
</tr>
</table>
<div class="draggable">Drag Me</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript">
$(".draggable").draggable();
$(".weekday").droppable({
drop: function() {
alert($(this).text());
}
});
</script>
这篇关于Jquery Drag-Drop(将元素放入)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!