拖拽式布局组件选择

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

demo演示

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

demo示例

Gridly是一个jQuery插件

5. jQuery UI + Bootstrap

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