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.

$("#element").swingdrag();

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

$("#element").swingdrag({

  // 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:

2017-07-12

• fix: The maximum rotation angle is now correctly calculated

2017-07-06

• swingdrag now works together with other draggable plugins like gridstack

2017-07-03

• 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.