first commit
This commit is contained in:
dev-chiefworks
@@ -0,0 +1,398 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # jQuery UI interactions
|
||||
*
|
||||
* Demo JS code for jqueryui_interactions.html page
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Setup module
|
||||
// ------------------------------
|
||||
|
||||
var JqueryUiInteractions = function() {
|
||||
|
||||
|
||||
//
|
||||
// Setup module components
|
||||
//
|
||||
|
||||
// Draggable
|
||||
var _componentUiDraggable = function() {
|
||||
if (!$().draggable) {
|
||||
console.warn('Warning - jQuery UI components are not loaded.');
|
||||
return;
|
||||
}
|
||||
|
||||
// Basic setup
|
||||
$('.draggable-element').draggable({
|
||||
containment: '#draggable-default-container'
|
||||
});
|
||||
|
||||
|
||||
//
|
||||
// Constrain movement
|
||||
//
|
||||
|
||||
// Both
|
||||
$('#draggable-move-both').draggable({
|
||||
containment: '#draggable-containment-container'
|
||||
});
|
||||
|
||||
// Vertical
|
||||
$('#draggable-move-vertical').draggable({
|
||||
containment: '#draggable-containment-container',
|
||||
axis: 'y'
|
||||
});
|
||||
|
||||
// Horizontal
|
||||
$('#draggable-move-horizontal').draggable({
|
||||
containment: '#draggable-containment-container',
|
||||
axis: 'x'
|
||||
});
|
||||
|
||||
|
||||
//
|
||||
// Revert position
|
||||
//
|
||||
|
||||
// Element
|
||||
$('#draggable-revert-element').draggable({
|
||||
containment: '#draggable-revert-container',
|
||||
revert: true
|
||||
});
|
||||
|
||||
// Clone helper
|
||||
$('#draggable-revert-clone').draggable({
|
||||
containment: '#draggable-revert-container',
|
||||
revert: true,
|
||||
helper: 'clone'
|
||||
});
|
||||
|
||||
// Speed
|
||||
$('#draggable-revert-speed').draggable({
|
||||
containment: '#draggable-revert-container',
|
||||
revert: true,
|
||||
revertDuration: 1500
|
||||
});
|
||||
|
||||
|
||||
//
|
||||
// Cursors
|
||||
//
|
||||
|
||||
// Move cursor
|
||||
$('#draggable-cursor-move').draggable({
|
||||
containment: '#draggable-cursor-container',
|
||||
cursor: 'move'
|
||||
});
|
||||
|
||||
// Crosshair cursor
|
||||
$( '#draggable-cursor-crosshair' ).draggable({
|
||||
containment: '#draggable-cursor-container',
|
||||
cursor: 'crosshair'
|
||||
});
|
||||
|
||||
// Bottom cursor
|
||||
$( '#draggable-cursor-bottom' ).draggable({
|
||||
containment: '#draggable-cursor-container',
|
||||
cursorAt: {
|
||||
bottom: 0
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
//
|
||||
// Handles
|
||||
//
|
||||
|
||||
// Text
|
||||
$( '#draggable-handle-text' ).draggable({
|
||||
containment: '#draggable-handle-container',
|
||||
handle: 'span'
|
||||
});
|
||||
|
||||
// Icon
|
||||
$( '#draggable-handle-icon' ).draggable({
|
||||
containment: '#draggable-handle-container',
|
||||
handle: '.handle-icon'
|
||||
});
|
||||
|
||||
// Exception
|
||||
$( '#draggable-handle-exception' ).draggable({
|
||||
containment: '#draggable-handle-container',
|
||||
cancel: 'span'
|
||||
});
|
||||
|
||||
|
||||
//
|
||||
// Events
|
||||
//
|
||||
|
||||
// Define elements
|
||||
var $start_counter = $('#draggable-event-start'),
|
||||
$drag_counter = $('#draggable-event-drag'),
|
||||
$stop_counter = $('#draggable-event-stop'),
|
||||
counts = [0, 0, 0];
|
||||
|
||||
|
||||
// Start event
|
||||
$start_counter.draggable({
|
||||
containment: '#draggable-events-container',
|
||||
start: function() {
|
||||
counts[0]++;
|
||||
updateCounterStatus( $start_counter, counts[0]);
|
||||
}
|
||||
});
|
||||
|
||||
// Drag event
|
||||
$drag_counter.draggable({
|
||||
containment: '#draggable-events-container',
|
||||
drag: function() {
|
||||
counts[1]++;
|
||||
updateCounterStatus($drag_counter, counts[1]);
|
||||
}
|
||||
});
|
||||
|
||||
// Stop event
|
||||
$stop_counter.draggable({
|
||||
containment: '#draggable-events-container',
|
||||
stop: function() {
|
||||
counts[2]++;
|
||||
updateCounterStatus($stop_counter, counts[2]);
|
||||
}
|
||||
});
|
||||
|
||||
// Update counter text
|
||||
function updateCounterStatus( $event_counter, new_count ) {
|
||||
$( '.event-count', $event_counter ).text( new_count );
|
||||
}
|
||||
};
|
||||
|
||||
// Droppable
|
||||
var _componentUiDroppable = function() {
|
||||
if (!$().draggable || !$().droppable) {
|
||||
console.warn('Warning - jQuery UI components are not loaded.');
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Basic functionality
|
||||
//
|
||||
|
||||
// Drag
|
||||
$('#droppable-basic-element').draggable({
|
||||
containment: '#droppable-basic-container'
|
||||
});
|
||||
|
||||
// Drop
|
||||
$('#droppable-basic-target').droppable({
|
||||
drop: function(event, ui) {
|
||||
$(this).addClass('bg-success-400 border-success-400 text-white').html('<span>Dropped!</span>');
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
//
|
||||
// Accept drop
|
||||
//
|
||||
|
||||
// Drag
|
||||
$('#droppable-accept-yes, #droppable-accept-no').draggable({
|
||||
containment: '#droppable-accept-container'
|
||||
});
|
||||
|
||||
// Drop
|
||||
$('#droppable-accept-target').droppable({
|
||||
accept: '#droppable-accept-yes',
|
||||
drop: function(event, ui) {
|
||||
$(this).addClass('bg-success-400 border-success-400 text-white').html('<span>Dropped!</span>');
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
//
|
||||
// Revert draggable position
|
||||
//
|
||||
|
||||
// Drag (revert on drop)
|
||||
$('#droppable-revert-drop').draggable({
|
||||
containment: '#droppable-revert-container',
|
||||
revert: 'valid'
|
||||
});
|
||||
|
||||
// Drag (revert always except drop)
|
||||
$('#droppable-revert-except').draggable({
|
||||
containment: '#droppable-revert-container',
|
||||
revert: 'invalid'
|
||||
});
|
||||
|
||||
// Drop
|
||||
$('#droppable-revert-target').droppable({
|
||||
drop: function(event, ui) {
|
||||
$(this).addClass('bg-success-400 border-success-400 text-white').html('<span>Dropped!</span>');
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
//
|
||||
// Visual feedback
|
||||
//
|
||||
|
||||
// Drag
|
||||
$('#droppable-visual-element').draggable({
|
||||
containment: '#droppable-visual-container'
|
||||
});
|
||||
|
||||
// Active drop
|
||||
$('#droppable-visual-target-active').droppable({
|
||||
containment: '#droppable-visual-container',
|
||||
accept: '#droppable-visual-element',
|
||||
activeClass: 'bg-slate border-slate text-white',
|
||||
drop: function(event, ui) {
|
||||
$(this).addClass('bg-success-400 border-success-400 text-white').html('<span>Dropped!</span>');
|
||||
}
|
||||
});
|
||||
|
||||
// Hover drop
|
||||
$('#droppable-visual-target-hover').droppable({
|
||||
containment: '#droppable-visual-container',
|
||||
hoverClass: 'bg-blue border-blue text-white',
|
||||
drop: function(event, ui) {
|
||||
$(this).addClass('bg-teal-400 border-teal-400 text-white').html('<span>Dropped!</span>');
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// Resizable
|
||||
var _componentUiResizable = function() {
|
||||
if (!$().resizable) {
|
||||
console.warn('Warning - jQuery UI components are not loaded.');
|
||||
return;
|
||||
}
|
||||
|
||||
// Basic functionality
|
||||
$('#resizable-basic-element').resizable({
|
||||
minWidth: 50,
|
||||
minHeight: 50
|
||||
});
|
||||
|
||||
// Animated resize
|
||||
$('#resizable-animate-element').resizable({
|
||||
minWidth: 50,
|
||||
minHeight: 50,
|
||||
animate: true
|
||||
});
|
||||
|
||||
// Preserve aspect ratio
|
||||
$('#resizable-ratio-element').resizable({
|
||||
minWidth: 50,
|
||||
minHeight: 50,
|
||||
aspectRatio: 16 / 9
|
||||
});
|
||||
|
||||
// Synchronous resize
|
||||
$('#resizable-sync-element1').resizable({
|
||||
minWidth: 50,
|
||||
minHeight: 50,
|
||||
alsoResize: '#resizable-sync-element2'
|
||||
});
|
||||
$('#resizable-sync-element2').resizable({
|
||||
minWidth: 50,
|
||||
minHeight: 50,
|
||||
alsoResize: '#resizable-sync-element1'
|
||||
});
|
||||
};
|
||||
|
||||
// Selectable
|
||||
var _componentUiSelectable = function() {
|
||||
if (!$().selectable) {
|
||||
console.warn('Warning - jQuery UI components are not loaded.');
|
||||
return;
|
||||
}
|
||||
|
||||
// Basic functionality
|
||||
$('#selectable-basic').selectable();
|
||||
|
||||
// Serialize
|
||||
$('#selectable-serialize').selectable({
|
||||
stop: function() {
|
||||
var result = $('#select-result').empty();
|
||||
$('.ui-selected', this).each(function() {
|
||||
var index = $('#selectable-serialize li').index(this);
|
||||
result.append(' #' + (index + 1));
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// Sortable
|
||||
var _componentUiSortable = function() {
|
||||
if (!$().sortable) {
|
||||
console.warn('Warning - jQuery UI components are not loaded.');
|
||||
return;
|
||||
}
|
||||
|
||||
// Basic functionality
|
||||
$('#sortable-list-basic').sortable();
|
||||
$('#sortable-list-basic').disableSelection();
|
||||
|
||||
|
||||
// Placeholder
|
||||
$('#sortable-list-placeholder').sortable({
|
||||
placeholder: 'sortable-placeholder',
|
||||
start: function(e, ui){
|
||||
ui.placeholder.height(ui.item.outerHeight());
|
||||
}
|
||||
});
|
||||
$('#sortable-list-placeholder').disableSelection();
|
||||
|
||||
|
||||
// Connected lists
|
||||
$('#sortable-list-first, #sortable-list-second').sortable({
|
||||
connectWith: '.selectable-demo-connected'
|
||||
}).disableSelection();
|
||||
|
||||
|
||||
//
|
||||
// Include/exclude items
|
||||
//
|
||||
|
||||
// Specify sort items
|
||||
$('#sortable-list-specify').sortable({
|
||||
items: 'li:not(.ui-handle-excluded)'
|
||||
});
|
||||
|
||||
// Exclude items
|
||||
$('#sortable-list-cancel').sortable({
|
||||
cancel: '.ui-handle-excluded'
|
||||
});
|
||||
|
||||
// Disable selections
|
||||
$('#sortable-list-specify li, #sortable-list-cancel li').disableSelection();
|
||||
};
|
||||
|
||||
|
||||
//
|
||||
// Return objects assigned to module
|
||||
//
|
||||
|
||||
return {
|
||||
init: function() {
|
||||
_componentUiDraggable();
|
||||
_componentUiDroppable();
|
||||
_componentUiResizable();
|
||||
_componentUiSelectable();
|
||||
_componentUiSortable();
|
||||
}
|
||||
}
|
||||
}();
|
||||
|
||||
|
||||
// Initialize module
|
||||
// ------------------------------
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
JqueryUiInteractions.init();
|
||||
});
|
||||
Reference in New Issue
Block a user