svg-line实现左右连线拖放操作答题效果代码-html代码-BFW代码库

代码语言：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<.........完整代码请登录后点击上方下载按钮下载查看