预览效果

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

答题连线

回调事件

调用方式

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"：