Jquery Drag-Drop（将元素放入） [英] Jquery Drag-Drop (Getting element 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>& 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中的宽度和高度。

这似乎是你想要的，由 jQuery UI文档：

 < 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">&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>

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（将元素放入）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！