拖拽式布局组件选择

1.draggabilly.js

• demo演示
• 官方文档

1.1. 使用方式及兼容性

可以结合jQuery使用，也可以用纯js的方式使用，可以支持IE8浏览器和移动触摸设备。

1.2. 使用方法

• 详细介绍

1.3. 主要特性

• 可拖动支持（支持方向）
• 兼容性：支持 IE8+ 和多触摸
• 既可以使用原生，也可以结合jQuery使用
• 2013年所出，但16年仍有人推荐，网上相关文档资料较全

2.gridster.js

• demo演示
• github文档

2.1.使用方式及兼容性

Gridster是一个jQuery插件，使得从横跨多个列中的元素构建直观的拖拽布局。可以动态地添加和删除网格元素。

2.2. 使用方法

• 详细介绍

2.3.主要特性

• 效果：支持元素的添加和删除
• 文档比较全
• 只依赖jQuery
• 比较适合开发益智游戏
• 2012年所出，现在没有再维护了

3.Freewall.js

• demo示例
• 官方文档

跨浏览器的jQuery插件，可创建多种类型的网格布局：灵活布局、拖拽布局

3.1. 使用方式及兼容性

是一个jQuery插件。支持Chrome、Opera、Safari、IE 8.0+、Firefox

3.2 使用方法

• 详细介绍

3.3 主要特性

• 可拖动支持（支持方向）
• 自定义插件
• 响应式
• CSS3动画（JS后备）
• 图片网格/布局
• 垂直网格/布局；水平网格/布局
• 2014年所出

注意：但不支持IE8及以下

4. drag.js

• demo演示

jQuery拖拽插件drag.js

$('.box-5 dl').each(function() {
    $(this).dragging({
        move: 'both', //拖动方向，x y both
        randomPosition: true, //初始位置是否随机
        hander: '.hander' //拖手
    });
});

5. gridly.js

• demo示例

Gridly是一个jQuery插件

5. jQuery UI + Bootstrap

• demo演示1
• demo演示2

更多资料： 11个好用的jQuery拖拽拖放插件 ；