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