drag and drop different rows within a group in jQuery

drag and drop different rows within a group in jQuery

I have a table with many rows with different categories like :
Mobile
nokia
samsung
grand-1
grand-2
Apple
Car
Computer
Apple
Intel
Mouse
We have categories like Mobile, Car, computer and mouse and I want to drag
and drop the elements but within its group only like we can drag and drop
grand-1 to grand-2 but not under nokia or computer. but whole samsung
group can be drag instead of nokia or apple.
Similarly Car and Mobile can be drag and drop with each other along with
all inner categories.
I have used some jQuery libraries and tablednd plugin but I can drag each
row anywhere since each item has a different in the table.
Is there any solutions? any help would be appreciated.
I am using following subroutine in perl.
sub mainList {
my $hash = shift;
my $options = '';
my $iter;
$options .= "<table id='sort' class='grid' >
<tbody>";
$iter = sub {
my $hash = shift;
my $indent = shift || '';
my $count = 0;
foreach my $k (sort keys %{$hash}) {
my $v = $hash->{$k};
$options .= "<tr><td>$v->{title}<br><" unless $indent;
if($indent){
$options .= "$v->{title} $indent";
}
if ($v->{children}){
$iter->($v->{children}, "--");
}
$options .= "</td></tr>" unless $indent;
}
};
$iter->($hash);
$options .="</tbody></table>";
return $options;
}
where I am passing a hash ref to create the table.