jquery draggable à travers les colonnes mais pas les lignes

Question

Je suis à la recherche d'un plugin jQuery qui me permettra de faire glisser des éléments à travers les colonnes, mais pas les lignes.

Donc disons que j'ai une table de 2 lignes et 3 colonnes.

Tous les éléments commencent dans la colonne 1 avec certains dans la rangée 1 et d'autres dans la deuxième rangée.

Désormais, les éléments de la première ligne peuvent uniquement être glissés dans des colonnes de la même ligne et identiques pour les éléments de la deuxième ligne.

Il ya beaucoup de plugins drag-drop là-bas, mais aucun que j'ai vu qui me laisse faire cela.

Tout comme un conseil de planification agile si vous avez utilisé un

modifier

Ou est-il un plugin que je peux utiliser pour se déplacer uniquement à des éléments d'un certain nom?

Answer 1

En utilisant jQuery UI, donner à chaque ligne de la table une indication de ligne qu'elle et utilisez l'option accept de droppable pour limiter où déposer une draggable spécifique.

Dans cet exemple, les éléments div sont déplaçables, placés à l'intérieur des éléments td de la table. Chaque tr a son attribut id défini sur row-x où x est le numéro de ligne. La fonction accept vérifie si le numéro de ligne de l'élément td droppable est le même que le numéro de la ligne à partir de laquelle le fichier glissable provient.

$("div").draggable({ revert: 'invalid' }); 

$("td").droppable({ 
    accept: function(draggable) { 
     var droppable_row = $(this).parent().attr("id").split("-")[1]; 
     var draggable_row = draggable.parent().parent().attr("id").split("-")[1]; 

     return droppable_row == draggable_row; 
    } 
}); 

Voici une démo: http://jsfiddle.net/EHA46/