jQuery UI Sortable - interdire le transfert dans des éléments enfants

Question

Je travaille avec les sortables de l'interface utilisateur de jQuery et j'ai créé un système de divs dans ce format;

<div class='mainDiv'>
    <label>text: <input type='text' name='textbox' /></label>

    <div class='children'>
        <div class='mainDiv'>...</div>
        <div class='mainDiv'>...</div>
        <div class='mainDiv'>
            <label>text: <input type='text' name='textbox' /></label>
            <div class='children'>...</div>
        </div>
    </div>
</div>

Les divs peuvent avoir un nombre infini d'enfants et je veux pouvoir glisser et déposer tous les fichiers .mainDiv dans leur boîte mère. J'ai donc utilisé ceci:

$(".mainDiv").parent().sortable({items: ".mainDiv", containment: "parent"});

Toutefois, cela permet aux éléments d’être glissés dans leurs divs enfants ou frères. ce que je ne veux pas arriver. Je veux limiter les éléments à rester chez leurs parents.

Toute aide ici serait brûlante.

A bientôt

Answer 1

J'ai réussi à le résoudre comme ceci:

$(this).parent().sortable({
    items: '> li',
    axis: 'y',
    ...
});

Dans votre cas, cela devrait fonctionner avec:

items: '> .mainDiv'

confinement: "parent" n'est pas obligatoire.

Dans mon cas, j'active l'option "triable". lors d'un événement de clic précédent, car il est plus rapide. Je pense que c'est plus facile si vous le liez au "mousedown" un événement. Si vous créez l’arborescence de manière dynamique (par exemple, Ajax), je vous recommande d’utiliser "livequery".