swingdrag是一款基于jquery UI的拖拽摇摆效果插件。它在原生jquery ui拖拽效果的基础上，使用CSS3的transitions 和 transforms来添加一些炫酷的摇摆效果。

安装

可以通过npm来安装swingdrag插件。

npm install swingdrag                  
                

使用方法

在页面中引入jquery和jquery-ui.min.js以及jquery.ui.swingdrag.min.js文件。

<script type="text/javascript" src="path/to/js/jquery.min.js"></script>
<script type="text/javascript" src="path/to/js/jquery-ui.min.js"></script>
<script type="text/javascript" src="path/to/js/jquery.ui.swingdrag.min.js"></script>
                

HTML结构

例如要拖动一个<div>元素，其HTML结构如下：

<div id="container">要拖动的DIV元素</div>         
                

初始化插件

在页面DOM元素加载完毕之后，可以通过swingdrag()方法来初始化swingdrag插件。

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

配置参数

swingdrag插件的可用配置参数如下：

$("#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
});
                 
                

• rotationAngleDeg：旋转的角度，默认值为8。
• showShadow：是否显示阴影效果。默认为true。
• pickUpScaleFactor：拖拽是元素的缩放比例。默认为1.1。

swingdrag拖拽元素插件的github地址为：https://github.com/waxalot/swingdrag

在线预览    源码下载