预览效果

点击连线可以删除连线；可以将线连接到连线之上

答题连线

回调事件

调用方式

            var obj2 = $("#aaa2").svgLine({
            //列表中选项的尺寸(支持sm、md、lg)
            size:'md',
            //皮肤，默认只支持green
            skin:'green',
            //左边列表标题
            headerLeft:'MODULE1',
            headerRight:'MODULE2',
            //选项中文名称的字段名
            name:'name',
            //选项的唯一标识的字段名,
            key:'key',
            //左边列表选项
            leftList:[
                {name:'天',key:'t',disable:true,icon:'fa fa-bandcamp'},{name:'雨',key:'y'},{name:'大陆',key:'dl'},{name:'山花',key:'sh'},{name:'赤日',key:'cr'}
                ],
            rightList: [
                {name:'地',key:'d'},{name:'风',key:'f'},{name:'长空',key:'ck'},{name:'苍穹',key:'cq'},{name:'海树',key:'hs'}
            ],
            //映射关系
            mapping:{'sh':'hs','cr':'cq','t':'d','y':'f','dl':'ck'},
            width:'600px',
            //选择映射时回调
            onSelect:function(l1,l2){
                appendMsg($("#msg"),"您连接了"+l1+"和"+l2);
            },
            //删除映射时回调
            onCancle:function(l1,l2){
                appendMsg($("#msg"),"您取消了"+l1+"和"+l2);
            },
        });
        //触发宽度重置
        obj2.resize(宽度);
        //获得数据
        alert(JSON.stringify(obj2.getData()));

svgLine方法的参数说明

参数名含义取值范围
headerLeft 左边列表标题任意值（支持html）
headerRight 右边列表标题任意值（支持html）
leftList 左列表选项数组，数组中的每个元素是一个选项，每个选项都需要定义key和name属性
rightList 右列表选项数组
mapping 初始连线关系左列表key值和右列表key值得关系
width 控件外部宽度px或者%
size 控件选项的高度只支持sm、md或lg，默认为sm
skin 控件皮肤默认为green，可进行自定义拓展
removAble 选项是否显示移除按钮true或false，默认为true，可控制所有选项是否可以手动删除，优先级小于选项自身的removable属性

leftList和rightList选项的参数说明

参数名含义取值范围
key 选项唯一标识，同一侧列表中的key值不能重复不能包含特殊字符，建议为字母数字或者下划线
name 选项显示的名称可为任意值
icon 选项图标图标的class名称，例如fa fa-plus
removable 是否可以移除选项，选项会显示删除按钮，优先级高于全局的removAble属性true或者false，默认为true
disable 选项是否可选，当选项中包含disable属性且值为true时，该选项不可选中，且与这个选项相连的选项无法被取消true或者false，默认为false

API

方法名称方法说明参数返回值
getData() 获得当前连线关系数据(空)return {左列表key1:右列表key1,左列表key2:右列表key2,...}
setData(map) 修改连线关系映射关系：
map={左列表key1:右列表key1,左列表key2:右列表key2,...}		(空)
resize(w) 重置插件外部宽度宽度值：100px、100%，w为空时等用于refresh()方法
示例：resize('100px')		(空)
refresh() 刷新插件视图(空)(空)
addOptions(opt) 动态添加选项，对于列表中已存在的key值的选项，不会添加到列表中
opt={
    //左列表中要添加的选项
    leftList:[
             {name:'新选项',key:'k1'}
    ],
    //右列表中要添加的选项
    rightList:[
             {name:'新选项',key:'k2'}
    ]
}
(空)
deleteOptions(opt) 动态删除选项，若选项已经存在连线，连线也会被删除
opt={
    //左列表中要删除的选项
    leftList:['key1','key2',...],
    //右列表中要删除的选项
    rightList:['key1','key2',...]
}
(空)
getUl() 获得ul的jquery对象，返回的是$(dom)对象(空)
return {
    left:左列表ul的$(dom)对象,
    right:右列表的ul的$(dom)对象
}

回调函数

函数名触发条件参数列表
onSelect(key1,key2) 连接两个选项时触发key1：左列表选项的key
key2：右列表选项的key
onCancle(key1,key2) 取消两个选项时触发key1：左列表选项的key
key2：右列表选项的key

拓展自定义皮肤样式

默认只支持green，可以在传入的skin参数中，添加自定义样式，假设skin值为"blue"，需要先使用下面这段样式来声明"blue"： 
            .lt-tr.blue .list-box ul>li:not(.active):not(.disabled):hover{
            background-color: #337ab7;color: white;border: none;box-shadow: 0 0 10px 0 #337ab7;
        }
        .lt-tr.blue .list-box ul>li.active:hover{
            background-color: #337ac7;color: white;border: none;box-shadow: 0 0 10px 0 #337ac7;
        }
        .lt-tr.blue .list-tool .list-tool-indiv>div>i{
            color:#337ab7!important;
        }
        .lt-tr.blue .list-box ul>li.active{
            background-color: #337ab7;color: white;
        }