Reorder elements in a list or grid using the mouse. ExamplesDefault functionalityConnect listsDisplay as gridDrop placeholderHandle empty listsInclude / exclude itemsPortlets Enable a group of DOM elements to be sortable. Click on and drag an element to a new spot within the list, and the other items will adjust to fit. By default, sortable items … Continue reading →

Change the size of an element using the mouse. ExamplesDefault functionalityAnimateConstrain resize areaHelperMaximum / minimum sizePreserve aspect ratioSnap to gridSynchronous resizeTextareaVisual feedback Enable any DOM element to be resizable. With the cursor grab the right or bottom border and drag to the desired width or height. view source 1 2 3 4 5 6 7 … Continue reading →

Use the mouse to select elements, individually or in a group. ExamplesDefault functionalityDisplay as gridSerialize Enable a DOM element (or group of elements) to be selectable. Draw a box with your cursor to select items. Hold down the Ctrl key to make multiple non-adjacent selections. view source 1 2 3 4 5 6 7 8 … Continue reading →

Allow elements to be moved using the mouse. ExamplesDefault functionalityAuto-scrollConstrain movementCursor styleEventsHandlesjQuery UI Draggable + SortableRevert positionSnap to element or gridVisual feedback Enable draggable functionality on any DOM element. Move the draggable object by clicking on it with the mouse and dragging it anywhere within the viewport. view source 1 2 3 4 5 6 … Continue reading →

Create targets for draggable elements. ExamplesDefault functionalityAcceptPrevent propagationRevert draggable positionSimple photo managerVisual feedback Enable any DOM element to be droppable, a target for draggable elements. view source 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 … Continue reading →