CODEWITHSUNDEEP
javascriptjquery-ui-sortablerubaxa-sortable
Skinner
Skinner

Reputation: 1503

Sortable Javascript with rubaxa

Im trying to implement the "multi" example on this page... http://rubaxa.github.io/Sortable/ . I feel like I've "recreated" the structure and the appropriate options as set forth on https://github.com/RubaXa/Sortable , but I am struggling to get this to function as i want.

the simplified version of what i'm trying to do is here... https://jsfiddle.net/uqcqufo8/

HTML...

<div id="multi">

<div><div data-force="5" class="layer title title_xl">Multi</div></div>

    <div class="layer tile" data-force="30" style="width:100px; height:100px; background:grey; margin:5px; display:inline-block; color:red;">

    <div class="tile__name">Group A</div>
        <div class="tile__list">
            <div style="background:red; width:10px; height:10px; margin:2px; display:inline-block;"></div>
            <div style="background:blue; width:10px; height:10px; margin:2px; display:inline-block;"></div>
            <div style="background:green; width:10px; height:10px; margin:2px; display:inline-block;"></div>
        </div>
    </div>

    <div class="layer tile" data-force="30" style="width:100px; height:100px; background:grey; margin:5px; display:inline-block; color:red;">
    <div class="tile__name">Group c</div>
    <div class="tile__list">
        <div style="background:red; width:10px; height:10px; margin:2px; display:inline-block;"></div>
        <div style="background:blue; width:10px; height:10px; margin:2px; display:inline-block;"></div>
        <div style="background:green; width:10px; height:10px; margin:2px; display:inline-block;"></div>
    </div>
    </div>

    <div class="layer tile" data-force="30" style="width:100px; height:100px; background:grey; margin:5px; display:inline-block; color:red;">
    <div class="tile__name">Group b</div>
    <div class="tile__list">
        <div style="background:red; width:10px; height:10px; margin:2px; display:inline-block;"></div>
        <div style="background:blue; width:10px; height:10px; margin:2px; display:inline-block;"></div>
        <div style="background:green; width:10px; height:10px; margin:2px; display:inline-block;"></div>
    </div>
    </div>

</div>

javascript...

var el = document.getElementById('multi');
            var sortable = Sortable.create(el, {
                animation: 150,
                handle: ".tile__name",
                draggable: ".tile"
});

Basically, the large grey squares should be sortable (as they are), but the colored squares should also be sortable - they should be sortable within their individual boxes, and they should be draggable from one grey box to another. I'm failing to see what i'm missing. Thanks.

Upvotes: 2

Views: 1019

Answers (1)

biscuitstack
biscuitstack

Reputation: 12142

I edited your javascript to the below and it works for me. I followed the examples on the Sortable page so it's likely the preferred method:

var el = document.getElementById('multi');
var sortable = Sortable.create(el, {
    animation: 150,
    handle: ".tile__name",
    draggable: ".tile"
});
[].forEach.call(document.getElementById('multi').getElementsByClassName('tile__list'), function (el){
    Sortable.create(el, {
        group: 'blocks',
        animation: 150
    });
});

Upvotes: 2

Related Questions