перетаскивать различные строки в группе в JQuery

Question

У меня есть таблица с большим количеством строк с различными категориями, как:

Mobile 
    nokia 
    samsung 
     grand-1 
     grand-2 
    Apple 
Car 
Computer 
    Apple 
    Intel 
Mouse 

У нас есть категории, как мобильный, автомобиль, компьютер и мышь, и я хочу, чтобы перетащить и падение элементы, но в пределах своей группы, только как мы можем перетащить grand-1 в grand-2, но не под Nokia или на компьютер. но целая группа samsung может быть перетаскиванием вместо nokia или apple.

Аналогичным образом автомобиль и мобильный телефон могут перетаскивать друг друга вместе со всеми внутренними категориями.

Я использовал некоторые библиотеки jQuery и плагин tablednd, но я могу перетаскивать каждую строку в любом месте, так как каждый элемент имеет другую таблицу.

Есть ли какие-либо решения? любая помощь будет оценена по достоинству.

Я использую следующую подпрограмму в 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; 
} 

, где я передаю хэш-код для создания таблицы.

Answer 1

Очевидным решением является использование отдельных таблиц 1 для каждой группы. Возможно, вам придется испортить маркер CSS, границы, чтобы таблицы выглядели как 1 бесшовная таблица, если это то, что вы после.

<table><caption>Mobile</caption> 
<tr> 
<td>nokia</td> 
<td>samesung</td> 
</tr> 
</table> 
<table><caption>Computer</caption> 
<tr> 
<td>apple</td> 
<td>intel</td> 
</tr> 
</table> 

Answer 2

Вы можете использовать JQuery-UI, он имеет возможность упасть только к определенным элементам