jquery+svg实现拖动连线答题效果代码-html代码-BFW代码库

代码语言：html

所属分类：拖放

代码描述：jquery+svg实现拖动连线答题效果代码，支持错误检测提示及默认答案。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
* {
	box-sizing:border-box
}
html,body {
	height:100%;
	background:#f5f5f5;
}
.container {
	margin:0 auto;
	max-width:960px;
	height:100%;
	background:#fff;
}
.draw-container {
	position:relative;
	height:500px;
	background:#fff;
}
.btn-group {
	position:absolute;
	top:0;
	right:0;
	width:100%;
	height:50px;
	line-height:50px;
	padding:0 20px;
	text-align:right;
}
.btn-group a:hover {
	color:#66b1ff;
}
.btn-group a {
	margin-right:15px;
	color:#409eff;
}
a.btn-submit {
	color:#67c23a
}
.draw-container ul {
	margin-top:80px;
}
.data-list {
	position:absolute;
}
.question-list {
	left:50px;
}
.answer-list {
	right:50px;
}
.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
}
.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;
	background:url('./img/delete-icon.png') no-repeat center;
	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;
}

</style>
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/reset.min.css">
    <style type="text/css">
        .reading h2{width:100%;margin:60px 0;text-align:center;line-height:2;font-size:20px;color:#59595b;}.reading h2 a{text-decoration:none;color:#59595b;font-size:20px;}.reading h2 a:hover{color:#2183f1;}
    </style>
</head>

<body>
    <div class="container">
        <div id="draw" class="draw-container">
            <div style="position: absolute" class="btn-group"><a href="javascript:;" id="j-default" title="点击会删除已选择答案">默认答案</a><a href="javascript:;" id="j-reset">重置</a><a href="javascript:;" id="j-submit" class="btn-submit">确定</a></div>
            <ul class="question-list data-list"></ul>
            <ul class="answer-list data-list"></ul><i class="remove-btn"></i></div>
        <div class="result-container">
            <h3>您的答案是：</h3>
            <ul class="result-display"></ul>
        </div>
    </div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.1.11.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/svg.min.js"></script>
<script >
const line = {
    init: function (questionObj, answerObj) {
        this.draw = SVG('draw').size("100%", "100%");
        this.lineArr = [];
        this.currentInfo = {};
        this.createList(questionObj)
        this.createList(answerObj)
        this.bindBtnEvent()
        this.bindParentsEvent()
    },
    /* 创建列表 */
    createList: function (obj, callback) {
        let type = obj.type,
            data = obj.data,
            content = [];
        if (type == 'question') {
            $('.question-list').empty()
            data.forEach(element => {
                let item = '<li class="question-li" data-question=' + element.question + ' data-answer=' + element.answer + '>' + element.question + '</li>',
                    obj = {};
                obj.beginValue = element.question;
                obj.line = this.createLine();
                this.lineArr.push(obj)
                content.push(item);
            });
            $('.question-list').html(content)
        } else {
            $('.answer-list').empty()
            data.forEach(element => {
                let item = '<li class="answer-li" data-answer=' + element + '>' + element + '</li>';
                content.push(item);
            });
            $('.answer-list').html(content);

        }
        // this.itemForEach(true)
    },
    /* 绑定按钮事件 */
    bindBtnEvent: function () {
        let self = this,
            parentPosition = $('#draw').offset();
        /* 鼠标按下question-list列，调整线条开始位置 */
        $('.question-list').on('mousedown', 'li', function (e) {

            let current = self.lineArr.find(el => {
                return el.beginValue == $(this).attr('data-question');
            });
            current.begin = {};
            current.beginElement = this;
            current.begin.y = $(this).offset().top - parentPosition.top + 15;
            current.begin.x = $(this).offset().left - parentPosition.left + 110;
            current.line.show();
            current.line.stroke({
                color: "#67C23A",
            });
            current.line.plot(current.begin.x, current.begin.y, current.begin.x, current.begin.y);
            current.end = {};
            /* 如果存在结束位置，删除 */
            if (current.endElement) {
                $(current.endElement).removeClass('selected')
                $(this).removeClass('selected')
            }
            current.endElement = '';
            current.endValue = '';
            self.currentInfo = current;
        })
        /* 鼠标按下answer-list列，调整线条结束位置 */
        $('.answer-list').on('mouseup', 'li', function (e) {
            let current = self.lineArr.find(el => {
                return el.beginValue == self.currentInfo.beginValue;
            });

            current.end.y = $(this).offset().top - parentPosition.top + 15;
            current.end.x = $(this).offset().left - parentPosition.left - 20;
            current.endElement = this;
            current.endValue = $(this).attr('data-answer');
            
            current.line.plot(current.begin.x, current.begin.y, current.end.x, current.end.y);
            $(current.beginElement).addClass('selected')
            $(current.beginElement).attr('data-selected', current.endValue)
            $(this).addClass('selected')

            self.currentInfo = '';
        })
        /* 默认答案 */
        $('#j-default').click(function (e) {
            self.itemForEach()
        })
        /* 重置 */
        $('#j-reset').click(function (e) {
            self.lineArr.forEach(el => {
                $(el.beginElement).removeClass("selected");
                $(el.beginEleme.........完整代码请登录后点击上方下载按钮下载查看