Customizable Swing Effect On Drag And Drop - swingdrag

File Size: 20 KB
Views Total: 3065
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Customizable Swing Effect On Drag And Drop - swingdrag

swingdrag is a lightweight jQuery plugin which applies a customizable swing animation effect to jQuery UI draggable functionality using CSS3 transitions and transforms.

How to use it:

1. Make sure you have loaded the jQuery and jQuery UI libraries.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/jquery-ui.min.js"></script>

2. Download and load the JavaScript file jquery.ui.swingdrag.min.js after jQuery & jQuery UI.

<script src="dist/jquery.ui.swingdrag.min.js"></script>

3. Attach the plugin's main function on the draggable element and done.


4. Customize the swing effect in the JavaScript as this:


  // The angle of rotation in degree.
  rotationAngleDeg: 3,

  // Indicates whether a pickup-/drop shadow should be shown.
  showShadow: true,

  // The pick up scale factor indicates the size change during dragging.
  pickUpScaleFactor: 1.1

Change log:


  • fix: The maximum rotation angle is now correctly calculated


  • swingdrag now works together with other draggable plugins like gridstack


  • Speed depending swing

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