Click to toggle dark text on white

animaDrag: Animating Drag and Drop Plugin

$().animaDrag is an ultra lightweight drag and drop plugin that is independent of the jQuery UI framework. Although it has fewer features than the UI draggable library, it is also much smaller. AnimaDrag allows draggable items to be eased by jQuery animation, which UI draggables do not allow. This allows for a richer display of the transition between two locations, with full easing support.

Default
Limited to #page and slow
Limited to #page, easeOutBounce easing, hides text when picked up
Faster, easeInCubic easing, appends to original div when dropped
 
Faster, uses grip to drag around
Fastest, with high interval

Show Code

$(document).ready(function() {
    document.body.onselectstart = function() {return false;}
    $('#anima-drag').animaDrag();
    $('#anima-drag2').animaDrag({
        boundary: '#page',
        speed: 1500
    });
    $('#anima-drag3').animaDrag({
        boundary: '#page',
        easing: 'easeOutBounce',
        before: function() {
            $(this).find('span').hide();
        },
        after: function() {
            $(this).find('span').show();
        }
    });
    $('#anima-drag4').animaDrag({
        speed: 200,
        interval: 250,
        easing: 'easeInCubic',
        after: function() {
            $(this).css({position:'static'}).appendTo('#drag-group');
        }
    });
    $('#anima-drag5').animaDrag({
        speed: 150,
        interval: 120,
        grip: '.grip'
    });
    $('#anima-drag6').animaDrag({
        speed: 0,
        interval: 400
    });
});

Because it relies on animation during its transition, it is recommended to use with the jQuery Easing Plugin.

Because it is so lightweight, it doesn't have anything built into it to know where to drop the draggable area when it is let go of. You'll need to use the "after" callback and append it somewhere yourself with $(this).appendTo(location);

I'll probably document this whole thing better eventually. For now, read the code if you can. There's nothing too complex going on. Here is the uncompressed code. Here is the compressed code, though it has a small footprint even without being compressed.

All Options (at default values)

jQuery(element).animaDrag({
    speed: 400,
    interval: 300,
    easing: null,
    cursor: 'move',
    boundary: document.body,
    grip: null,
    overlay: true,
    after: function(e) {},
    during: function(e) {},
    before: function(e) {},
    afterEachAnimation: function(e) {}
});

 

Click here for the animadrag.min.js code - Click here for the uncompressed code

If you are interested in jQuery animation, check out my jQuery animation tutorial (for beginners).

Most Recent Blog Post: jQuery Mapbox Updated

Privacy Policy | Click Here | jQuery Plugins by Wayfarer | Freelance Jobs Available | Random JavaScript Code Samples | Share a Random Link | JavaScript Jobs