Vue使用JQuery和svg.js实现连线题 文字、图片、音频 双列与三列

使用先下载jquery与svg.js

npm i --save jquery

npm i --save svg.js

template部分

<div id="draw" class="draw-container">

                <div style="position: absolute" class="btn-group">

                    <p href="javascript:;" id="j-reset">重置</p>

                    <p id="j-submit">确认</p>

                </div>

                <div id="result-dadan"></div>

                <ul class="question-list data-list">

                </ul>

                <ul class="answer-list data-list">

                </ul>

                <ul class="audio-list data-list">

                </ul>

            </div>

css部分

.demo1{

    width:760px;

    height:706px;

    margin:0 auto;

}

 .show { 

    position:relative;

    width:500px; 

    margin:40px 100px; 

    cursor:pointer;

} 

.show.topBottom {

    width: 1000px;

}

.canvas{ 

    position:absolute; 

    left:0px; 

    top:0px; 

    z-index:-1;

}

.backcanvas{ 

    position:absolute; 

    left:0px; 

    top:0px; 

    z-index:-2;

}

.showleft{ 

    float:left;

    width:150px; 

}

.showright {

    float:right;

    width:150px; 

} 

.showtop, .showbottom {

    float: left;

}

.showtop {

    margin-top: 20px; 

}

.showbottom {

    margin-top: 120px;

    margin-bottom: 20px; 

}

.show .showitem{

    width:130px; 

    height:60px; 

    display:block; 

    margin:10px 0;

    background:#0CF; 

    border-radius:15px; 

    padding:10px;

    color:#fff;

}

.show.topBottom .showitem {

    float: left; 

    margin: 0 10px; 

}

.show span.addstyle { 

    background:#F96;

}

.tools{ 

    position:absolute; 

    height:50px; 

    width: calc( 100% + 20px ); 

    position:absolute; 

    top:-50px; 

    left:-10px;

    }

.tools div{ 

    float:right; 

    height:50px; 

    padding:0 5px; 

    margin:0 5px; 

    color:#0C9; 

    cursor:pointer; 

    line-height:30px;

}

.tools div:hover{ 

    color:#C30;

}

.showimg{ 

    position:absolute; 

    left:510px; 

    top:0px; width:500px;

}

.container {

    margin: 0 auto;

    max-width: 960px;

    height: 75%;

    /* background: #fff; */

}

.draw-container {

    position: relative;

    height: 100%;

    /* background: #fff; */

}

.btn-group {

    position: absolute;

    bottom: 10%;

    width: 100%;

    height: 50px;

    line-height: 50px;

    padding: 0 20px;

    text-align: right;

    display: flex;

    justify-content: center;

}

.btn-group p:hover{

    color: #66b1ff;

}

#j-reset{

    width: 100px;

    height: 85%;

    color: #4e4f50;

    background-color: #ecf0ff;

    border: 1px solid rgb(160, 160, 160);

    display: flex;

    justify-content: center;

    align-items: center;

    border-radius: 5%;

    cursor: pointer;

}

#j-submit{

    width: 100px;

    height: 85%;

    color: white;

    background-image: linear-gradient(to top, #1f96f7 , #2c64fa);

    display: flex;

    justify-content: center;

    align-items: center;

    border-radius: 5%;

    cursor: pointer;

    margin-left: 3%;

}

p.btn-submit {

    color: #67c23a

}

.draw-container ul {

    margin-top: 4%;

}

.data-list {

    position: absolute;

}

.question-list {

    left: 15%;

    height: 65%;

    display: flex;

    flex-direction: column;

    justify-content: space-evenly;

}

.answer-list {

    right: 50%;

    height: 65%;

    display: flex;

    flex-direction: column;

    justify-content: space-evenly;

}

.audio-list{

    width: 30%;

    right: 5%;

    height: 65%;

    display: flex;

    flex-direction: column;

    justify-content: space-evenly;

}

.data-list>li {

    margin: 15px;

    padding: 0 10px;

    width: 100px;

    height: 30px;

    background: #ecf5ff;

    line-height: 30px;

    font-size: 16px;

    color: #409eff;

    border: 1px solid #b3d8ff;

    border-radius: 10px;

    cursor: crosshair;

    text-align: center

}

.question-list > li{

    color: red;

}

.data-list li:hover,

.data-list li.selected {

    background: #409eff;

    border-color: #409eff;

    color: #fff;

}

.hover-g {

    cursor: pointer;

    opacity: 1;

    stroke-width: 4;

}

.remove-btn {

    position: absolute;

    top: 0;

    left: 0;

    width: 20px;

    height: 20px;

    font-size: 14px;

    cursor: pointer;

    display: none;

}

.result-container {

    padding: 20px;

    border-top: 1px solid #333;

}

.result-container li{

    font-size: 16px;

    line-height: 35px;

}

.question-li{

    cursor: pointer;

}

methods方法部分

lianxixi(){

            const line = {

                init: function (questionObj, answerObj,audio) {

                    this.draw = SVG('draw').size("100%", "85%");

                    this.lineArr = [];

                    this.ansArr = [];

                    this.currentInfo = {};

                    this.LXarr = [];

                    this.lssArr = [];

                    this.zhong = ''

                    this.left = ''

                    this.LXarrr = this.LXarr;

                    this.createList(questionObj)

                    this.createList(answerObj)

                    this.createList(audio)