jQuery Clayfy Plugin Demos: Draggable

Basic

Drag element all over the screen. Press "esc" key for cancel movement when dragging.

$('#demo-1').clayfy();

Container

You can only drag element over container. Drag element could be or not to be a container's child

$('#demo-2').clayfy({
    container : '#container-2'
});

Also, you can define bounderies from drag element itself. Use array (top, right, bottom, left) to constrict element's movement.

Bounderies are defined from element's init position, width and height.

$('#demo-3').clayfy({
    container : [0, 300, 30, 5]
});

Constrict movement

You can set constrict movement vertically, horizontally, or neither. Turn false properties moveX, moveY and move. Also, you can easily change cursor CSS property.

<style>
   #demo-4{
       cursor : w-resize;
   }
</style>

<script>
    $('#demo-4').clayfy({
        moveY : false,
        container : '#container-4'
    });
</script>

Scroll

If container is overflowed, you can drag element close to bounderies for scroll container.

$('#demo-5').clayfy({
   container : '#container-5'
});

Also, you can add extra scrollable HTML elements. So, when you drag element near scrollable borders, scrollable element will scroll

$('#demo-6').clayfy({
   scrollable : '.scrollable'
});

Ghost

Set Ghost from element. Or set your own markup. Or define a function and return a markup.

$('#demo-7').clayfy({
    ghost : true
});

$('#demo-8').clayfy({
    ghost : '<img src="...">', //triangle png image
    container : '#container-8'
});

var count = 0;
$('#demo-9').clayfy({
    container : [10 , 200 , 30, 10],
    ghost : function(){
        count++;
        return '<b>' + count + '</b>'
    }
});

Droppable

Define droppable elements.

<style>
    #droppable-10.clayfy-dragenter{
        border-color : #38c429;
    }
    #droppable-10.clayfy-dropinside{
        border-color : #5a6de3;
    }
    #demo-10.clayfy-dragenter{
        background : #38c429;
    }
    #demo-10.clayfy-dropinside{
        background : #5a6de3;
    }
</style>

<script>
    $('#demo-10').clayfy({
        droppable : '#droppable-10, #droppable-11'
    });
    $('#demo-11').clayfy({
        fit : false,
        droppable : '#droppable-10, #droppable-11',
    });
    $('#demo-12').clayfy({
        dropoutside : true,
        droppable : '#droppable-10, #droppable-11'
    });
    $('#demo-12').on({
        'clayfy-dragenter' : function(e){
            e.target.style.borderColor = '#039f8f';
            this.style.backgroundColor = '#039f8f';
        },
        'clayfy-dragleave' : function(e){
            e.target.style.borderColor = '';
            this.style.backgroundColor = '#ccc';
        },
        'clayfy-dropinside' : function(e){
            e.target.style.borderColor = '#ff700e';
            this.style.backgroundColor = '#ff700e';
        }
    });
</script>

Migrate.

Parent's drag element can change after drop it inside drop area.

$('#demo-13').clayfy({
    droppable : '#droppable-13',
    scrollable : '#droppable-13',
    migrate : true
});

As you can see, draggable element was moved inside droppable as its child. But now draggable element can not go outside drop area. You can set 'visible' overflow CSS property, but that will remove scrollbars. So, you can turn true 'overflow' propery in options. When you are dragging, element will be temporaly migrated to a helper container outside its parent.

Overflow property is false by default because element's inherit properties could be compromised.

$('#demo-14').clayfy({
    droppable : '#droppable-14',
    scrollable : '#droppable-14',
    migrate : true,
    overflow : true,
});