jQuery.udraggable: Methods

This is a demo page for the jquery.udraggable.js plugin:

“This plugin provides an API similar to jQueryUI's draggable but with support for unified mouse and touch events. It builds on Michael S. Mikowski's jquery.event.ue unified event plugin.”

The following examples illustrate the use of various methods to change the udraggable behaviour after the initial setup.

Description Example

You can call the destroy method to completely remove the udraggable behaviour from the target element.

$('#drag16').udraggable({
    containment: 'parent'
});

$('#destroy-btn').click(function () {
    $('#drag16').udraggable('destroy');
});

You can call the disable and enable methods to temporarily disable the udraggable behaviour and later enable it again.

$('#drag17').udraggable({
    containment: 'parent'
});

$('#disable-btn').click(function () {
    $('#drag17').udraggable('disable');
});

$('#enable-btn').click(function () {
    $('#drag17').udraggable('enable');
});

You can call the option method to set a new value for an option after the udraggable behaviour has been initialised.

$('#drag18').udraggable({
    containment: 'parent'
});

$('#sml-grid-btn').click(function () {
    $('#drag18').udraggable('option', {
        grid: [10, 10]
    });
});

$('#big-grid-btn').click(function () {
    $('#drag18').udraggable('option', {
        grid: [30, 30]
    });
});

This example also calls the option method - in this case to alter the 'containment' setting.

$('#drag19').udraggable({
    containment: 'parent'
});

$('#zone-red-btn').click(function () {
    $('#drag19').udraggable('option', {
        containment: [90, 30, 180, 150]
    });
});

$('#zone-blue-btn').click(function () {
    $('#drag19').udraggable('option', {
        containment: [30, 60, 240, 110]
    });
});

[Home]

Copyright © 2013-2014 Grant McLean