1.draggabilly.js
1.1. 使用方式及兼容性
可以结合jQuery使用,也可以用纯js的方式使用,可以支持IE8浏览器和移动触摸设备。
1.2. 使用方法
1.3. 主要特性
- 可拖动支持(支持方向)
- 兼容性:支持 IE8+ 和多触摸
- 既可以使用原生,也可以结合jQuery使用
- 2013年所出,但16年仍有人推荐,网上相关文档资料较全
2.gridster.js
2.1.使用方式及兼容性
Gridster是一个jQuery插件,使得从横跨多个列中的元素构建直观的拖拽布局。可以动态地添加和删除网格元素。
2.2. 使用方法
2.3.主要特性
- 效果:支持元素的添加和删除
- 文档比较全
- 只依赖jQuery
- 比较适合开发益智游戏
- 2012年所出,现在没有再维护了
3.Freewall.js
跨浏览器的jQuery插件,可创建多种类型的网格布局:灵活布局、拖拽布局
3.1. 使用方式及兼容性
是一个jQuery插件。支持Chrome、Opera、Safari、IE 8.0+、Firefox
3.2 使用方法
3.3 主要特性
- 可拖动支持(支持方向)
- 自定义插件
- 响应式
- CSS3动画(JS后备)
- 图片网格/布局
- 垂直网格/布局;水平网格/布局
- 2014年所出
注意:但不支持IE8及以下
4. drag.js
jQuery拖拽插件drag.js
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/drag.js"></script>
$('.box-5 dl').each(function() {
$(this).dragging({
move: 'both', //拖动方向,x y both
randomPosition: true, //初始位置是否随机
hander: '.hander' //拖手
});
});
5. gridly.js
Gridly是一个jQuery插件
5. jQuery UI + Bootstrap
更多资料: 11个好用的jQuery拖拽拖放插件 ;