svg-line实现左右连线拖放操作答题效果代码
代码语言：html
所属分类：拖放
代码描述：svg-line实现左右连线拖放操作答题效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/svg-line.min.js"></script>
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/svg-line.min.css">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
<script>
function htmlEncode(s){
return (typeof s != "string") ? s :
s.replace(/"|&|'|<|>|[\x00-\x20]|[\x7F-\xFF]|[\u0100-\u2700]/g,
function($0){
var c = $0.charCodeAt(0), r = ["&#"];
c = (c == 0x20) ? 0xA0 : c;
r.push(c); r.push(";");
return r.join("");
});
}
</script>
<style>
body{margin:0}
.p20{padding: 10px 20px;}
.a-btn{font-weight: bold;cursor: pointer;color: #337ab7;font-size: 18px;margin-left: 10px;}
em{color: red;font-style: normal}
.br-table{table-layout: fixed;width: 100%}
.br-table tr:first-child>td,th{
text-align: center;
}
.br-table td:first-child,th:first-child{
font-weight: bold;
}
.br-table td,th{
border-top: 1px solid #aaa;padding: 5px;
border-left: 1px solid #aaa;
font-size: 14px;line-height: 200%;
}
.br-table tr:last-child>td{
border-bottom: 1px solid #aaa;
}
.br-table tr>td:last-child{
border-right: 1px solid #aaa;
}
.br-table tr>th:last-child{
border-right: 1px solid #aaa;
}
.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;
}
</style>
</head>
<body class="full">
<div id="mainDiv" class="full" style="padding: 10px 50px;box-sizing: border-box;">
<h3 class="p20">预览效果</h3>
<div class="p20" style="width: 100%;">
点击连线可以删除连线；可以将线连接到连线之上
</div>
<div style="width: 100%;display: flex;flex-direction: row">
<div id="aaa1" style="width: 500px;border: 1px solid #aaa;box-shadow: darkgrey 0 0 10px 0;margin: 20px;">
</div>
<div id="aaa2" style="width: 600px;border: 1px solid #aaa;box-shadow: darkgrey 0 0 10px 0;margin: 20px;">
</div>
</div>
<div class="p20">
<button onclick="alert(JSON.stringify(obj1.getData()));">获得数据</button>
<button onclick="resize()">重置宽度</button>
<button onclick="obj2.setData({'sh':'hs','t':'f'});">设置连线</button>
<button onclick="addOptions('leftList')">动态插入选项</button>
<button onclick="deleteOptions()">动态删除选项</button>
</div>
<h3 class="p20">答题连线</h3>
<div style="width: 100%;display: flex;flex-direction: row">
<div id="aaa3" style="width: 500px;border: 1px solid #aaa;box-shadow: darkgrey 0 0 10px 0;margin: 20px;">
</div>
<div id="aaa4" style="width: 500px;border: 1px solid #aaa;box-shadow: darkgrey 0 0 10px 0;margin: 20px;">
</div>
</div>
<div class="p20" style="width: 100%;">
<button onclick="getResult()">提交答案</button>
</div>
<h3 class="p20">回调事件</h3>
<div class="p20" style="width: 100%;display: flex;flex-direction: row">
<textarea rows="10" id="msg" style="width: 600px;outline: none">回调事件</textarea>
</div>
<h3 class="p20">调用方式</h3>
<div class="p20">
<pre>
<script>
document.write(htmlEncode("var obj2 = $(\"#aaa2\").svgLine({\n" +
" //列表中选项的尺寸(支持sm、md、lg)\n" +
" size:'md',\n" +
" //皮肤，默认只支持green\n" +
" skin:'green',\n" +
" //左边列表标题\n" +
" headerLeft:'MODULE1',\n" +
" headerRight:'MODULE2',\n" +
" //选项中文名称的字段名\n" +
" name:'name',\n" +
" //选项的唯一标识的字段名,\n" +
" key:'key',\n" +
" //左边列表选项\n" +
" leftList:[\n" +
" {name:'天',key:'t',disable:true,icon:'fa fa-bandcamp'},{name:'雨',key:'y'},{name:'大陆',key:'dl'},{name:'山花',key:'sh'},{name:'赤日',key:'cr'}\n" +
" ],\n" +
" rightList: [\n" +
" {name:'地',key:'d'},{name:'风',key:'f'},{name:'长空',key:'ck'},{name:'苍穹',key:'cq'},{name:'海树',key:'hs'}\n" +
" ],\n" +
" //映射关系\n" +
" mapping:{'sh':'hs','cr':'cq','t':'d','y':'f','dl':'ck'},\n" +
" width:'600px',\n" +
" //选择映射时回调\n" +
" onSelect:function(l1,l2){\n" +
" appendMsg($(\"#msg\"),\"您连接了\"+l1+\"和\"+l2);\n" +
" },\n" +
" //删除映射时回调\n" +
" onCancle:function(l1,l2){\n" +
" appendMsg($(\"#msg\"),\"您取消了\"+l1+\"和\"+l2);\n" +
" },\n" +
" });\n" +
" //触发宽度重置\n" +
" obj2.resize(宽度);\n" +
" //获得数据\n" +
" alert(JSON.stringify(obj2.getData()));"));
</script>
</pre>
</div>
<h3 class="p20">svgLine方法的参数说明</h3>
<div class="p20">
<table class="br-table" cellspacing="0">
<tr>
<th width="160px">参数名</th>
<th>含义</th>
<th>取值范围</th>
</tr>
<tr>
<td>headerLeft</td>
<td>左边列表标题</td>
<td>任意值（支持html）</td>
</tr>
<tr>
<td>headerRight</td>
<td>右边列表标题</td>
<td>任意值（支持html）</td>
</tr>
<tr>
<td>leftList</td>
<td>左列表选项</td>
<td>数组，数组中的每个元素是一个选项，每个选项都需要定义key和name属性</td>
</tr>
<tr>
<td>rightList</td>
<td>右列表选项</td>
<td>数组</td>
</tr>
<tr>
<td>mapping</td>
<td>初始连线关系</td>
<td>左列表key值和右列表key值得关系</td>
</tr>
<tr>
<td>width</td>
<td>控件外部宽度</td>
<td>px或者%</td>
</tr>
<tr>
<td>size</td>
<td>控件选项的高度</td>
<td>只支持sm、md或lg，默认为sm</td>
</tr>
<tr>
<td>skin</td>
<td>控件皮肤</td>
<td>默认为green，可进行自定义拓展</td>
</tr>
<tr>
<td>removAble</td>
<td>选项是否显示移除按钮</td>
<td>true或false，默认为true，可控制所有选项是否可以手动删除，优先级小于选项自身的removable属性</td>
</tr>
</table>
</div>
<h3 class="p20">leftList和rightList选项的参数说明</h3>
<div class="p20">
<table class="br-table" cellspacing="0">
<tr>
<th width="160px">参数名</th>
<th>含义</th>
<th>取值范围</th>
</tr>
<tr>
<td>key</td>
<td>选项唯一标识，同一侧列表中的key值不能重复</td>
<td>不能包含特殊字符，建议为字母数字或者下划线</td>
</tr>
<tr>
<td>name</td>
<td>选项显示的名称</td>
<td>可为任意值</td>
</tr>
<tr>
<td>icon</td>
<td>选项图标</td>
<td>图标的class名称，例如fa fa-plus</td>
</tr>
<tr>
<td>removable</td>
<td>是否可以移除选项，选项会显示删除按钮，优先级高于全局的removAble属性</td>
<td>true或者false，默认为true</td>
</tr>
<tr>
<td>disable</td>
<td>选项是否可选，当选项中包含disable属性且值为true时，该选项不可选中，且与这个选项相连的选项无法被取消</td>
<td>true或者false，默认为false</td>
</tr>
</table>
</div>
<h3 class="p20">API</h3>
<div class="p20">
<table class="br-table" cellspacing="0">
<tr>
<th width="160px">方法名称</th>
<th>方法说明</th>
<th>参数</th>
<th>返回值</th>
</tr>
<tr>
<td>getData()</td>
<td>获得当前连线关系数据</td>
<td>(空)</td>
<td>return {左列表key1:右列表key1,左列表key2:右列表key2,...}</td>
</tr>
<tr>
<td>setData(map)</td>
<td>修改连线关系</td>
<td>映射关系：<br>map={左列表key1:右列表key1,左列表key2:右列表key2.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0