[problem] Nested Sortable
Hi All
am new in jQuery, and am stuck in nested sortable items
what i want is when user holds title and move it to anther place all childes of this title most move also.
also we need to sort on childes for the same parent
for sorting childes for the same parent i used
-
$('#tbl').sortable({ items: 'tr' });
$('#tbl2').sortable({ items: 'tr' });
$('#tbl3').sortable({ items: 'tr' });
and it's works just fine till i added this line
-
$('.Parant1').sortable({ connectWith: ["#Container"] });
could any one please help me
here is my code
-
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="DragDrop_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="jquery-ui-1.7.custom.min.js" type="text/javascript"></script>
<title></title>
<script language="javascript" type="text/javascript">
$(function() {
$('.Parant1').sortable({ connectWith: ["#Container"] });
$('#tbl').sortable({ items: 'tr' });
$('#tbl2').sortable({ items: 'tr' });
$('#tbl3').sortable({ items: 'tr' });
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="Container">
<div class="Parant1">
<div class="title" style="background-color:Gray">Title 1</div>
<table width="100" id="tbl">
<tr><td>1</td></tr>
<tr><td>11</td></tr>
<tr><td>111</td></tr>
</table>
</div>
<div class="Parant1">
<div class="title" style="background-color:Gray">Title 2</div>
<table width="100" id="tbl2">
<tr><td>2</td></tr>
<tr><td>22</td></tr>
<tr><td>222</td></tr>
</table>
</div>
<div class="Parant1">
<div class="title" style="background-color:Gray">Title 3</div>
<table width="100" id="tbl3">
<tr><td>3</td></tr>
<tr><td>33</td></tr>
<tr><td>333</td></tr>
</table>
</div>
</div>
</form>
</body>
</html>
thanks in advance