jQuery Plugin To Create Draggable, Resizable And Sortable Elemenets - Clayfy

Clayfy is a powerful and highly customizable jQuery plugin which enables draggable, resizable and sortable functionalities on DOM elements.

More Examples:

• Draggable Demos
• Sortable Demos

Basic usage:

1. Include jQuery library and the jQuery Clayfy plugin's JS & CSS files on the webpage.

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

2. The JavaScript to make an element draggable.

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

3. Default options for the draggable functionality.

// Bounderies are defined from element's init position, width and height.
bounderies : [10000000,10000000,10000000,10000000],

// CSS Selector, Array (top, right, bottom, left) or an instance of DraggableContainer (you can use $.clayfy.container(...))
container : '', 

// Element can be moved vertically
moveX: true,

// Element can be moved horizontally
moveY : true,

// Element can be moved
move : true,

// CSS selector. Exclude childs when click
not : '', 

// Element is not dragged itself but an image ghost. 
// Set true or fill with markup. 
// Also, a function that returns markup
ghost : false,

// Cover screen with layer for easily drag all over the screen (also, over iframes)
coverScreen : true, 

// CSS Selector or JQuery instance. 
// By default, conainer is scrollable. Turn to false to not scroll
scrollable : '', 

// CSS Selector or JQuery instance where is allowed to drop
droppable : '', 

// Fit inside drop area when drop inside.
fit : true, 

// Allow to drop outside droppable area.
dropoutside : false, 

// Change parent after drop inside drop area
migrate : false, 

// Element will be temporaly append to an helper container outside parent
overflow : false, 

// Cancel dragging with esc key
escape : true,

propagate : true,

// Delay before dragging
mobileDelay : 100,
helperOnMobile : true,
delay : 100,

// callbacks
dragstart : function(e){},
drag : function(e){}, //this = draggable
drop : function(e){}

3. The JavaScript to make an element resizable.

$('#demo').clayfy({
  type : 'resizable',
  minSize : [30,50],
  maxSize : [600,300]
});

4. Extra options for the resizable functionality.

// Preserve Aspect Ratio when element is being resized.
preserveAspectRatio : false,

// Max size of element: width, height
maxSize : [500, 200],

// Min size of element: width, height
minSize : [100,50],

// whether the element can be resize by left side
left : true,

// whether the element can be resize by top side
top: true,

// whether the element can be resize by right side
right : true,

// whether the element can be resize by bottom side
bottom : true,

// custom class
className : ''

5. The JavaScript to make an element sortable.

$('.demo').clayfy({
  type : 'sortable'
});

6. Extra options for the sortable functionality.

// CSS selector. 
// Force elements to be considered siblings. 
// By default, only actual siblings.
siblings : '',

// allow export item to another parent
export : true

7. Events.

• clayfy-drag: When element is being dragged.
• clayfy-dragstart: When element starts to be dragged.
• clayfy-dragenter: When draggable enters droppable.
• clayfy-dragleave: When draggable leaves droppable.
• clayfy-dropinside: When draggable is dropped inside droppable.
• clayfy-dropoutside: When draggable is dropped outside droppable.
• clayfy-drop: When draggable is dropped.
• clayfy-resize: When element is being resized
• clayfy-resizeend: When resizing ends
• clayfy-resizestart: When resizing starts
• clayfy-cancel: When resizing is cancelled
• clayfy-changeorder: When element has been changed place

Changelog:

2019-06-13

• Delay before start dragging added

2019-03-17

• Fixed clickable elements and mobile support
• CSS updated.

2018-07-26

• Fixed Resizable inhering options from Draggable

---

This awesome jQuery plugin is developed by aewebsolutions. For more Advanced Usages, please check the demo page or visit the official website.