jQuery Clayfy Plugin Demos: Sortable

Basic

Each '.demo-1' can change place with each sibling that has the same CSS selector, only under the same parent. Press "esc" key for cancel.

<div>
    <div class="demo-1">A.1</div>
    <div class="demo-1">A.2</div>
    <div class="demo-1">A.3</div>
</div>
<div>
    <div class="demo-1">B.1</div>
    <div class="demo-1">B.2</div>
    <div class="demo-1">B.3</div>
</div>

<script>
    $('.demo-1').clayfy({
        type : 'sortable'
    });
</script>

Siblings and export

You can set siblings selector. Now, elements can change place with each element that matches '.demo-2' CSS selector. As you see, CSS selector in 'siblings' property does not constrict matching under same parent.

$('.demo-2').clayfy({
    type : 'sortable',
    siblings : '.demo-2'
});

More about Siblings and exporting

$('.demo-3').clayfy({
    type : 'sortable',
    siblings : '.demo-4, .demo-3'
});
$('.demo-4').clayfy({
    type : 'sortable',
    siblings : '.demo-4, .demo-3',
    export : false
});

$('.demo-31').clayfy({
    type : 'sortable',
    siblings : '.demo-41, .demo-31'
});
$('.demo-41').clayfy({
    type : 'sortable',
    siblings : '.demo-4, .demo-3',
    export : false
});

Styling and events

All styles and events from draggable are inherit by droppable. Use class "clayfy-box" for style element when is being moved, and "clayfy-sort-droparea" to style droparea when element is inside it.
Otherside, see the power of "clayfy-changeorder" event.

<style>
    .demo-5,
    .demo-5.clayfy-box{
        background: rgb(49, 181, 0);
        cursor: s-resize
    }
    #container-5 .clayfy-sort-droparea{
        border: 4px dashed red
    }
</style>

<script>
    $('.demo-5').clayfy({
        type : 'sortable',
        moveX : false,
        container : '#container-5'
    });
    $('.demo-5').on('clayfy-changeorder', function(e){
        console.log('new index: ' + e.index)
        console.log(e.order)
    });
</script>