1.draggabilly.js
1.1. 使用方式及兼容性
可以結(jié)合jQuery使用义钉,也可以用純js的方式使用,可以支持IE8瀏覽器和移動觸摸設備隔盛。
1.2. 使用方法
1.3. 主要特性
- 可拖動支持(支持方向)
- 兼容性:支持 IE8+ 和多觸摸
- 既可以使用原生眼刃,也可以結(jié)合jQuery使用
- 2013年所出截歉,但16年仍有人推薦而咆,網(wǎng)上相關(guān)文檔資料較全
2.gridster.js
2.1.使用方式及兼容性
Gridster是一個jQuery插件霍比,使得從橫跨多個列中的元素構(gòu)建直觀的拖拽布局”┍福可以動態(tài)地添加和刪除網(wǎng)格元素桂塞。
2.2. 使用方法
2.3.主要特性
- 效果:支持元素的添加和刪除
- 文檔比較全
- 只依賴jQuery
- 比較適合開發(fā)益智游戲
- 2012年所出,現(xiàn)在沒有再維護了
3.Freewall.js
跨瀏覽器的jQuery插件馍驯,可創(chuàng)建多種類型的網(wǎng)格布局:靈活布局阁危、拖拽布局
3.1. 使用方式及兼容性
是一個jQuery插件。支持Chrome汰瘫、Opera狂打、Safari、IE 8.0+混弥、Firefox
3.2 使用方法
3.3 主要特性
- 可拖動支持(支持方向)
- 自定義插件
- 響應式
- CSS3動畫(JS后備)
- 圖片網(wǎng)格/布局
- 垂直網(wǎng)格/布局趴乡;水平網(wǎng)格/布局
- 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拖拽拖放插件 蝗拿;