jQuery Plugin To Move Elements Based On Screen Size - MoveIt

MoveIt is a simple, lightweight jQuery plugin which allows to move any element to another when the screen size matches a specified breakpoint.

How to use it:

1. To use this plugin, you need to load the jQuery MoveIt plugin after the jQuery library is loaded.

<script src="//code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="moveIt.js"></script>

2. The JavaScript to move an element. In this case, the element '.block' will be placed under the '.header' when the screen size is smaller than 640px.

$('.container').moveIt([
  {
    el: '.block', 
    moveTo: '#header',
    position: 'append', 
    bpDirection: 'max-width'
  }
], 640);

3. The plugin also has the ability to move multiple elements at different breakpoints specified in the JavaScript.

$('.container').moveIt([
  {
    el: '#el-1',
    moveTo: '#container-2'
  },
  {
    el: '#el-2',
    moveTo: '#container-2'
  }
], 640);

4. Pass the following parameters to each item object to override the default options.

// Element to be moved
el: '.block',

// target element
moveTo: '#header',

// 'append' or 'before'
position: 'append',

// or 'min-width'
bpDirection: 'max-width',

// override the default breakpoint
breakpoint: 480,

// remove any script tags within the element you are moving.
removeInlineScripts: false

5. Events.

$('.container').on('itemMoved', function() {
  // Triggered when any item is moved, there or back.
});

$('.container').on('itemMovedThere', function() {
  // Triggered when any item is moved to destination.
});

$('.container').on('itemMovedBack', function() {
  // Triggered when any item is moved back to original position.
});

$('.container').on('itemsMovedThere', function() {
  // Triggered when all items have moved to destination.
});

$('.container').on('itemsMovedBack', function() {
  // Triggered when all items have moved back to original position.
});

---

This awesome jQuery plugin is developed by tandroid1. For more Advanced Usages, please check the demo page or visit the official website.