djs-mover

This is a javascript library to move and replace DOM elements.

You select the jQuery element to move, its destination and the related position.

It uses invisible placeholders to keep the initial position of the moved element. So you can easily replace the DOM element.

Installation

bower install djs-mover

Dependencies

This package requires jQuery.

If you install it with Bower, the dependencies will be included.

Usage

Move

To move an element use the move function.

// Move #element after #destination
djs.mover.move($('#element'), $('#destination'), 'after');

The third argument is the position related to #destination. It can be 'append', 'prepend', 'after' or 'before'.

If the first or the second argument contain more than one DOM element, only the first DOM element will be processed.

Replace

To replace an element previously moved, use the replace function.

// Replace #element to its initial position
djs.mover.replace($('#element'));

Example

If you work with a talented rather unorthodox web designer (@ThomasLeGoff), you may need to move DOM elements when passing from medium to small screen. For example, you may concatenates the menu, some sharing links and some footer links in a left side panel. Rather than duplicating all these DOM elements and toggle visibility when changing the responsive state, you can do this (with the djs-breakpoints library):

// Function to move menus
function moveMenus() {
    djs.mover.move($('#menu'), $('#left-panel'), 'append');
    djs.mover.move($('#share-links'), $('#left-panel'), 'append');
    djs.mover.move($('#footer-links'), $('#left-panel'), 'append');
}

// Function to replace menus
function replaceMenus() {
    djs.mover.replace($('#menu'));
    djs.mover.replace($('#share-links'));
    djs.mover.replace($('#footer-links'));
}

// Bind responsive events
djs.breakpoints.add('sm', 'down', moveMenus);
djs.breakpoints.add('sm', 'up', replaceMenus);
// If smaller than medium when starting, moveMenus
if (djs.breakpoints.is('xs, sm')) {
    moveMenus();
}