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

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