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