I have 3 tables on a page. The 1st is a source table; the other 2 are destination tables. Here are their defs (I am using ASP.NET MVC 2.0):
Source:
<table id="sourceTable">
<tr>
<th>
RegionID
</th>
<th>
RegionDescription
</th>
</tr>
<% foreach (var item in Model) { %>
<tr>
<td>
<%: item.RegionID %>
</td>
<td>
<%: item.RegionDescription %>
</td>
</tr>
<% } %>
Destination:
<table id="destinationTable01" class="destinationTable">
<tr>
<th>
RegionID
</th>
<th>
RegionDescription
</th>
</tr>
</table>
<table id="destinationTable02" class="destinationTable">
<tr>
<th>
RegionID
</th>
<th>
RegionDescription
</th>
</tr>
</table>
Here is the JQuery I used to drag and drop the values from the source table to the destination table:
<script type="text/javascript">
$(function () {
$("#sourceTable tr:gt(0)").draggable({
revert: 'invalid',
helper: 'clone'
});
$(".destinationTable").droppable({
drop: function (event, ui) {
$(".destinationTable").append(ui.draggable);
}
});
});
</script>
When I run this and drag/drop a row from the source table to a destination table, BOTH tables are getting the draggable. I search these forums and other sites and could not find an answer. Does anyone have an idea on how when I drag/drop a row from the source table, it only goes into the table where my mouse is on?
Thanks in advance