宁静-初学vue和jsplumb(2)

    这个章节算是学习笔记，计划用jsplumb来做流程图设计，用于工作流审批。目前只会讲一些用到的技术点，不会对整块领域进行讲解，那样内容太庞大了，一个章节是讲不完，等后续项目有用到再陆续写出来。项目下载地址 密码：8888

    1.布局样式，使用的是bootstrap3.4.1，用到栅栏，把工具箱（可拖拽的内容）和界面区（可拖拽的区域）左右分割；用到面板，用来排版工具箱和界面区对应的区域

    如下代码：

界面效果：

    2.vue，只整理暂时有用到的一些vue的基本东西,vue用到的是2.6.11版本，用来双向绑定数据，操作数据比较方便，利用vue-v-for循环绑定，还有样式绑定，还用DOM渲染后事件，渲染后给环节div，新增jsplumb断点等信息

    如下代码：

其中node为对象，index为索引值，后面绑定就可以直接使用，v-bind:绑定，也可以简写类似后面:id赋值一样。

注册vue区域，开放方法可以操作vue中的数据。这边实例化vue的名称为vm，后面会用到。

    3.jquery-ui，主要是用来拖拽，使用的版本是1.13.1，之所以用这个是由于工作中用到这个比较习惯，不想再去研究vue的拖拽组件，有点懒，哈。

    注册可以拖拽的元素：

    setDraggable: function () {

        $(“li”).draggable({

            helper: “clone”,//标识拖拽为复制形式，就是拖到指定区域，该区域可以新增dom元素，原始li的元素依旧还在

            zIndex: 10//拖动时li-zindex的值。属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

        });

    }

    setDroppable: function () {

        $(“#divContent”).droppable({//注册divContent可以拖到元素到该区域

            drop: function (event, ui) {

                var id = jcommon.doGuid();//获取guid

                //声明环节对象

                var node = {

                    id: id,

                    nodename: ui.helper[0].innerText,//拖动元素的text

                    X: ui.offset.left,//拖动的位置x

                    Y: ui.offset.top//拖动的位置y

                }

                vm.add(node);//把数据新增到vue数据源中，有双向绑定的效果，就会自动渲染指定dom元素了

            }

        });

    }

    4.jsplumb，主要是用来画流程图，使用的版本是5.x的版本，社区版，目前没有版权问题。

    主要属性：会提供一个xmind文档供下载

    jsplumb的使用方法会在下一章节继续。