预览效果

点击连线可以删除连线；可以将线连接到连线之上
左列表
  • c1
  • c2
  • c3x
  • c4
  • c5
  • c6
  • c7
  • c9
  • c10
  • c11
  • c12
右列表
  • p1
  • p2
  • c3
  • p4
  • p5
  • p6
  • p7
  • p8
  • p9
  • p10
  • p11
  • p12
上联
  • 天x
  • 雨x
  • 大陆x
  • 山花x
  • 赤日x
下联
  • 地x
  • 风x
  • 长空x
  • 苍穹x
  • 海树x

答题连线

小学生都会的四则运算题
  • 1 + 1x
  • 2 * 4x
  • 19 - 7x
答案
  • 12x
  • 8x
  • 2x
历史题
  • 明太祖是谁？（问题来自电影《百变星君》）x
答案
  • A.朱元璋x
  • B.朱头皮x
  • xi.朱茵x
  • D.猪猪侠x

回调事件

调用方式 

            
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;
        }