jQuery sélecteur droppable pour les cellules de la ligne

Question

Je rencontre des problèmes pour trouver la bonne syntaxe de sélection pour ce problème et j'apprécierais un peu d'aide. Donc, j'ai une table qui a cinq colonnes.

Dans chaque rangée, dans chaque cellule, j'ai des éléments DIV avec une classe appelée MyClass. J'ai configuré les objets de MyClass pour qu'ils soient déplaçables, et maintenant je dois configurer les cibles de dépôt appropriées. Je voudrais pour toutes les cellules de la rangée qu'il existe un élément avec MyClass, sauf la première colonne, mais SEULEMENT pour la ligne dans laquelle l'élément existe (il ne devrait pas pouvoir être déposé dans les colonnes de lignes au-dessus ou en dessous).

J'espère que cela a du sens. Quelqu'un a des idées quelle serait la syntaxe correcte pour cela? Voici ce que j'ai actuellement en train de travailler, mais ce n'est pas tout à fait exact, car cela permet de laisser tomber les lignes au-dessus ou au-dessous.

$(".MyClass").closest("tr").children(":not('.column-1')").droppable({ ... }); 

Answer 1

Vous pouvez passer une fonction à la accept option pour .droppable() il accepte que ces <div> éléments dans la même ligne, comme celui-ci:

$(".MyClass").closest("tr").children(":not('.column-1')").droppable({ 
    accept: function(draggable) { 
     return $.contains(this.parentNode, draggable[0]); 
    } 
}); 

Dans la fonction draggable est l'objet jQuery qui est le draggable, nous utilisons simplement $.contains() pour voir si le .parentNode (le <tr>) contient ce que l'on peut faire glisser ... ce qui signifie que le <div> que vous essayez de faire tomber vient de cette rangée.

You can test it out here.