brootstrap可视化拖拽布局调研

概述

在线操作网址：http://www.bootcss.com/p/layoutit/
主要是使用插件jquery-ui-draggable和jquery-ui-sortable的配合实现拖拽和排序。

插件文档

jquery-ui-draggable：http://www.runoob.com/jqueryui/api-draggable.html。
jquery-ui-sortable：http://www.runoob.com/jqueryui/api-sortable.html#option-connectWith。

拖拽思路

说明

定义组件模板，包括布局组件及交互组件，container定义成sortable，基于jquery-ui-sortable，组件设置ui-draggable, 部分交互组件还会contenteditable，或者其它需要的特性。

拖拽添加组件

dragstart时clone的背景element为相应模板，dragend之后模板自动填充到container中，这些配置拖拽插件就能搞定；

（1）拖拽添加行：允许将拖拽元素（“布局系统”中的）放置到内容区的.demo容器中，即添加行。

（2）拖拽添加组件：允许将拖拽元素（“基本css”、“组件”、“javascript”中的）放置到内容区.demo下的.column容器中，即添加列。

左侧边栏中的可拖拽项（布局系统中的12列项）的dom，实际已经包含了这个项的所有html结构和样式（只是隐藏了实际的布局样式，仅显示列数展示输入框和拖动按钮）。如下图：

当拖拽到内容区时，隐藏.preview的列数展示输入框，显示.view的实际结构和样式：

.demo .preview {
    display: none;
}

排序

initContainer()方法中，初始化排序内容区的所有列，并限制在指定的元素(class为'drag')上开始排序。

下载

点击“下载”按钮时，调用downloadLayoutSrc方法，获取内容区html然后过滤不需要的样式、属性、编辑器的工具样式、元素等，输出过滤结果。

初始化拖拽的详细代码说明

 $(".sidebar-nav .lyrow").draggable({
        connectToSortable: ".demo",// 允许将拖拽元素放置到内容区的.demo容器中，即添加行
        helper: "clone",// 元素将被克隆，且克隆将被拖拽
        handle: ".drag",// 只可拖拽$(".sidebar-nav .lyrow .drag")元素，即工具栏里的"拖动"按钮。
        start: function (e, t) {// dragstart 当拖拽开始时触发
            if (!startdrag) stopsave++;
            startdrag = 1;
        },
        drag: function (e, t) {// 在拖拽期间当鼠标移动时触发
            t.helper.width(400);// 设置拖拽时“重像”的宽度
        },
        stop: function (e, t) {// dragstop 当拖拽停止时触发
            // 为新行重新排序
            $(".demo .column").sortable({
                opacity: 0,
                connectWith: ".column",
                start: function (e, t) {
                    if (!startdrag) stopsave++;
                    startdrag = 1;
                },
                stop: function (e, t) {
                    if (stopsave > 0) stopsave--;
                    startdrag = 0;
                }
            });
            if (stopsave > 0) stopsave--;
            startdrag = 0;
        }
    });
    $(".sidebar-nav .box").draggable({
        // 允许将拖拽元素放置到内容区.demo下的.column容器中，即添加列
        connectToSortable: ".column",
        helper: "clone",
        handle: ".drag",
        start: function (e, t) {
            if (!startdrag) stopsave++;
            startdrag = 1;
        },
        drag: function (e, t) {
            t.helper.width(400)
        },
        stop: function () {
            handleJsIds();
            if (stopsave > 0) stopsave--;
            startdrag = 0;
        }
    });