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