✔ JQuery UI sortable und "Menükategorien"

[Zack]

Hallo,
ich habe mir einer Struktur gebaut in der es möglich sein soll per Drag and Drop Menüpunkte in Kategorien schieben kann. Es soll aber auch die Möglichkeit existieren Menüpunkte ohne Categorie zu verwenden. Das Problem dabei ist das ich eine Kategorie in eine andere Kategorie schieben kann. Das soll nicht möglich sein.

Hier mein Quelltext

$(document).ready( function() {
    $(".sortable").sortable({
        placeholder: 'ui-state-highlight',
        axis: 'y',
        connectWith: '.cate'
    });
    $(".cate").sortable({
        placeholder: 'ui-state-highlight',
        axis: 'y',
		// TODO not cat handelt 
        connectWith: '.sortable'
    }); 
} );

Und hier der HTML-Code dazu ( aus Script generiert)

<ul class="sortable">
    <li id="scid_1" class="cat">
        <input type="hidden" value="1" name="1">
        <div class="categorie_name">Cat 1</div>
        <div class="categorie">
            <ul class="cate">
                <li id="sid_1" class="ui-state-default">
                    Site 1                                
                    <input type="hidden" value="1" name="1">
                </li>
            </ul>
        </div>
        <input type="hidden" value="1" name="1_end">
    </li>
    <li id="scid_2" class="cat">
        <input type="hidden" value="2" name="2">
        <div class="categorie_name">Cat 2</div>
        <div class="categorie">
            <ul class="cate">
                <li id="sid_2" class="ui-state-default">
                    Site 2                                
                    <input type="hidden" value="2" name="2">
                </li>
            </ul>
        </div>
        <input type="hidden" value="2" name="2_end">
    </li>
    <li class="ui-state-default">
        Site 3
        <input type="hidden" value="2" name="2">    
    </li>
    <li class="ui-state-default">
        Site 4
        <input type="hidden" value="2" name="2">    
    </li>
    <li class="ui-state-default">
        Dest
        <input type="hidden" value="2" name="2">    
    </li>
</ul>

Wie bekomm ich das hin das man eine Kategorie nicht ein eine andere schieben kann?

 

[Sven Mintel]

Moin,

du kannst über die items-Option festlegen, welche Elemente sortierbar sein sollen.

Bei dir scheinen dass die li.ui-state-default zu sein, daher:

$(document).ready( function() {
    $(".sortable").sortable({
        placeholder: 'ui-state-highlight',
        axis: 'y',
        items: 'li.ui-state-default' 
    });
} );

 

[Zack]

Hallo,
leider klappt das nicht ganz. Was ich vergessen habe zu erwähnen ist das es möglich sein soll einen Eintrag in eine Kategorie zu ziehen. Also nochmal kurz zusammengefasst:
-Kategorie und Einträge sollen verschiebbar sein
-Eine Kategorie sollen nicht in andere Kategorien verschiebbar sein
-Einträge sollen in Kategorien verschiebbar sein
-Einträge sollen auch ohne Kategorie verschiebbar sein
( z.B.: Ich kann also die Kategorien sortieren und es soll möglich sein das ich zwischen 2 Kategorien einfach einen Eintrag ziehen der vorher in einer Kategorie war)

 

[Sven Mintel]

So sollte es gehen:

<script>
$(document).ready( function() {
    $(".sortable1").sortable({items:'li.cat',containment:'parent'});
    $(".sortable2").sortable({items:'li.ui-state-default',connectWith:'.sortable1'});
} );
</script>
<div class="sortable1">
<ul class="sortable2">
    <li id="scid_1" class="cat">
        <input type="hidden" value="1" name="1">
        <div class="categorie_name">Cat 1</div>
        <div class="categorie">
            <ul class="cate">
                <li id="sid_1" class="ui-state-default">
                    Site 1                                
                    <input type="hidden" value="1" name="1">
                </li>
            </ul>
        </div>
        <input type="hidden" value="1" name="1_end">
    </li>
    <li id="scid_2" class="cat">
        <input type="hidden" value="2" name="2">
        <div class="categorie_name">Cat 2</div>
        <div class="categorie">
            <ul class="cate">
                <li id="sid_2" class="ui-state-default">
                    Site 2                                
                    <input type="hidden" value="2" name="2">
                </li>
            </ul>
        </div>
        <input type="hidden" value="2" name="2_end">
    </li>
    <li class="ui-state-default">
        Site 3
        <input type="hidden" value="2" name="2">    
    </li>
    <li class="ui-state-default">
        Site 4
        <input type="hidden" value="2" name="2">    
    </li>
    <li class="ui-state-default">
        Dest
        <input type="hidden" value="2" name="2">    
    </li>
</ul>
</div>

Beachte das neue <div>, in welches das Ganze eingepackt ist, das ist wichtig(es ermöglicht quasi 2 verschiedene Sortables mit derselben Liste)

 

[Zack]

Ja danke das ist . Mal sehen ob ichs auch nachvollziehen kann ;D