Clayfy Jquery Plugin

Features overview

• No markup changes over element.
• Constrict movement (x/y)
• Container area
• Scroll containers over bounderies.
• Ghost image
• Droppable area
• Migration (reappend element to a new parent on dropping)
• Resizing constricts (min/max)
• Resizing handlers from outside: you can use
• CSS customization resizable handlers
• Sort elements from a same parent or export to a new one
• Events

Installation

Include JQuery js and plugin’s css and js files in your HTML code.

<script src="/lib/jquery.js"></script> 
<link rel="stylesheet" href="/dist/clayfy.css" type="text/css" /> 
<script src="/dist/clayfy.js"></script> 

Usage

Next there is basic usage for Clayfy. Further information you can find inside demos and options and events tables below.

Draggable

When document is ready, you can call the plugin for an absolute positioned element.

$(document).ready(function(){

    $('#draggable').clayfy({
        type : 'draggable'
    });

});

As 'draggable' is Clayfy's type default value, you can make that cleaner:

    $('#draggable').clayfy();

You can assign a container to your draggable element. Your element doesn't need to be a container's child.

<div id="container"><div>
<div id="draggable"></div>

$('#draggable').clayfy({
    container : #container
});

Also, you can assign a droppable element. Further, you can set up draggable and droppable behavior through plugin's options, events and CSS.

Markup:

<div id="droppable-1"><div>
<div id="droppable-2"><div>
<div id="draggable"></div>

Javascript:

$('#draggable').clayfy({
    droppable : '#droppable-1, #droppable-2'
})
$('#draggable').on({
    'clayfy-dragenter' : function(e){
        console.log(e.target)
    },
});

SCSS:

#draggable{
    &.clayfy-dragenter{
        background : #38c429;
    }
    &.clayfy-dropinside{
        background : #5a6de3;
    }
}
#droppable-1{
    &.clayfy-dragenter{
        border-color : #38c429;
    }
    &.clayfy-dropinside{
        border-color: #5a6de3;
    }
}

Resizable

Resizable elements inherits draggable options. But element does not need to be absolute positioned, although is required if you like to drag it.

Just call:

$('#resizable').clayfy({
    type : 'resizable'
});

Options: minSize, maxSize and preserveAspectRatio you will surely use. There are further options too that you may need (see table below).

There are a list of events that you may need. For example,

$resizable = $('#resizable');
$resizable.on('clayfy-resize clayfy-cancel', function(){
    console.log( $resizable.width() + ' x '+ $resizable.height() )
});

Last, for an easy handler styling, use className option:

$('#resizable').clayfy({
    type : 'resizable',
    className : 'myCustomClass'
});

.myCustomClass{
    &.clayfy-top:after{
        content: '';
        position: absolute;
        height: 2px;
        top:0;left:0;
        width:100%;
        background: red;
    }
}

Sortable

Sortable elements element may be absolute positioned, although is not recommended.

By default, each sortable element can change place with a sibling that has the same CSS selector and has the same parent:

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

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

Of course, there are severals options. For instance, you can change order between elements from diferent parents (siblings option), move node from one to another (export option), constrict movement (see draggable options), etc.

Further examples you will find inside demos.

Options

Options can be set locally as a paramater or globally through $.clayfy.settings object.

Also, it is worth to say that most of draggable options can be use in resizable and sortable types (but, of course, not vice versa).

Draggable

Resizable

Sortable

Events

Use event paramenter to have access to useful properties, as target or droparea.

Draggable

Draggable

Sortable

License

Clayfy has been developed by Ángel Espro. It is licensed under the MIT license