jquery实现可回退连线答题效果代码
代码语言：html
所属分类：拖放
代码描述：jquery实现可回退连线答题效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
font-size: 14px;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
overflow: hidden;
}
.clearfix {
zoom: 1;
}
.show {
position: relative;
width: 540px;
margin: 40px 100px;
cursor: pointer;
}
.canvas {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
.backcanvas {
position: absolute;
left: 0px;
top: 0px;
z-index: -2;
}
.showleft {
float: left;
width: 152px;
}
.showright {
float: right;
width: 152px;
}
.show .showitem {
width: 152px;
height: 130px;
display: block;
margin: 10px 0;
border-radius: 15px;
padding: 10px;
}
.tools {
position: absolute;
height: 30px;
width: 500px;
position: absolute;
top: 550px;
left: -178px;
}
.tools div {
float: right;
height: 30px;
padding: 0 5px;
margin: 0 5px;
color: #060707;
cursor: pointer;
line-height: 30px;
}
.tools div:hover {
color: #C30;
}
.tools .goBackBtn {
color: #aaa39f;
}
.tools .resetCanvasBtn {
color: #aaa39f;
}
.showleft .showitem {
color: #aaa39f;
font-size: 18px;
}
.showleft .showitem img {
padding-right: 0px;
}
.showright .showitem {
color: #aaa39f;
font-size: 18px;
}
.showright .showitem img {
padding-right: 0px;
}
.showright .showitem p {
position: relative;
top: -76px;
left: 107px;
;
}
.demo1 {
width: 760px;
height: 706px;
margin: 0 auto;
}
.btn {
background: url(//repo.bfw.wiki/bfwrepo/images/lianxina/tijiao.png) no-repeat;
width: 117px;
height: 64px;
border: 0;
text-indent: -99999px;
cursor: pointer;
margin-left: 320px;
margin-top: -26px;
}
</style>
</head>
<body>
<form name="form" method="post" action="#">
<div class="demo1">
<div class="show clearfix">
<div class="showleft" first="0">
<!--左侧-->
<span class="showitem" group="gpl" left="172" top="75" sel="0" check="0"><img src="//repo.bfw.wiki/bfwrepo/images/lianxina/lianxian_03.png" alt="">红色草莓味糖果</span>
<span class="showitem" group="gpl" left="172" top="235" sel="0" check="0"><img src="//repo.bfw.wiki/bfwrepo/images/lianxina/lianxian_11.png" alt="">绿色苹果味糖果</span>
<span class="showitem" group="gpl" left="172" top="395" sel="0" check="0"><img src="//repo.bfw.wiki/bfwrepo/images/lianxina/lianxian_18.png" alt="">黄色柠檬味糖果</span>
</div>
<div class="showright" first="0">
<!--右侧-->
<span class="showitem" group="gpr" left="388.0000305175781" top="75" sel="0" check="0"><img src="//repo.bfw.wiki/bfwrepo/images/lianxina/lianxian_06.png" alt=""><p>妈妈</p></span>
<span class="showitem" group="gpr" left="388.0000305175781" top="235" sel="0" check="0"><img src="//repo.bfw.wiki/bfwrepo/images/lianxina/lianxian_13.png" alt=""><p>爸爸</p></span>
<span class="showitem" group="gpr" left="388.0000305175781" top="395" sel="0" check="0"><img src="//repo.bfw.wiki/bfwrepo/images/lianxina/lianxian_21.png" alt=""><p>豆豆</p></span>
</div>
<canvas class="canvas" width="540" height="490"></canvas>
<!--连线画布-->
<canvas class="backcanvas" width="540" height="490"></canvas>
<!--提示线画布-->
<div class="tools">
<!--<div class="downloadImageBtn">下载</div>-->
<div class="goBackBtn">回退</div>
<div class="resetCanvasBtn">重置</div>
</div>
</div>
<div class="saveImageBtn"><input type="button" value="提交" onclick="re()" class="btn"></div>
</div>
</form>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(function () {
setTimeout(function () {
creatline($(".demo1"));
}, 500);
});
function creatline(box) {//===========createfun
var linewidth = 2, linestyle = "#393a3a";//连线绘制--线宽，线色
//初始化赋值 列表内容
box.find(".showleft").children("span").each(function (index, element) {
$(this).attr({ group: "gpl", left: $(this).position().left + $(this).outerWidth(), top: $(this).position().top + $(this).outerHeight() / 2, sel: "0", check: "0" });
});
box.find(".showright").children("span").each(function (index, element) {
$(this).attr({ group: "gpr", left: $(this).position().left, top: $(this).position().top + $(this).outerHeight() / 2, sel: "0", check: "0" });
});
box.find(".showleft").attr('first', 0);//初始赋值 列表内容容器
box.find(".showright").attr('first', 0);
//canvas 赋值
var canvas = box.find(".canvas")[0]; //获取canvas 实际连线标签
canvas.width = box.find(".show").width();//canvas宽度等于div容器宽度
canvas.height = box.find(".show").height();
var backcanvas = box.find(".backcanvas")[0]; //获取canvas 模拟连线标签
backcanvas.width = box.find(".show").width();
backcanvas.height = box.find(".show").height();
//连线数据
var groupstate = false;//按下事件状态，标记按下后的移动，抬起参考
var mx = [];//连线坐标
var my = [];
var ms = [];
var temp;//存贮按下的对象
var pair = 0;//配对属性
var pairl = [];
var pairr = [];
//提示线数据
var mid_startx, mid_starty, mid_endx, mid_endy;//存储虚拟连线起始坐标
//事件处理---按下
box.children(".show").children().children("span").on("mousedown", function (event) {
groupstate = true;
if ($(this).attr("check") == 1) {
$(this).attr("sel", "1").parent().attr("first", "1");
temp = $(this);
} else {
$(this).attr("sel", "1").addClass("addstyle").parent().attr("first", "1");
temp = $(this);
};
mid_startx = $(this).attr("left");
mid_starty = $(this).attr("top");
event.preventDefault();
});
$(document).mousemove(function (event) { //移动
var $target = $(event.target);
if (groupstate) {
mid_endx = event.pageX - box.find(".show").offset().left;
mid_endy = event.pageY - box.find(".show").offset().top;
var targettrue = null;
if ($target.is("span") && $target.closest(".show").parent().attr("class") == box.attr("class")) {
targettrue = $target;
} else if ($target.closest(".showitem").is("span") && $target.closest(".show").parent().attr("class") == box.attr("class")) {
targettrue = $target.closest(".showitem");
} else {
targettrue = null;
};
if (targettrue) {
if (targettrue.parent().attr("first") == 0) {
if (targettrue.attr("check") == 0) {
targettrue.addClass("addstyle").attr("sel", "1").siblings("span[check=0]").removeClass("addstyle").attr("sel", "0");
};
} else {
if (targettrue.attr("check") == 0) {
targettrue.addClass("addstyle").attr("sel", "1").siblings("span[check=0]").removeClass("addstyle").attr("sel", "0");
mid_startx = targettrue.attr("left");
mid_starty = targettrue.attr("top");
};
//temp=targettrue;
};
} else {
if (box.find(".showleft").attr("first") == 0) {
box.find(".showleft").children("span").each(function (index, element) {
if ($(this).attr('check') == 0) {
$(this).attr("sel", "0").removeClass("addstyle");
};
});
};
if (box.find(".showright").attr("first") == 0) {
box.find(".showright").children("span").each(function (index, element) {
if ($(this).attr('check') == 0) {
$(this).attr("sel", "0").removeClass("addstyle");
};
});
};
};
backstrockline();
};
event.preventDefault();
});
$(document).mouseup(function (event) { //抬起
var $target = $(event.target);
if (groupstate) {
var targettrue;
if ($target.is("span") && $target.closest(".show").parent().attr("class") == box.attr("class")) {
targettrue = $target;
} else if ($target.closest(".showitem").is("span") && $target.closest(".show").parent().attr("class") == box.attr("class")) {
targettrue = $target.closest(".showitem");
} else {
targettrue = null;
};
if (targettrue) {
if (targettrue.parent().attr("first") == 0) {
if (targettrue.attr("check") == 0) {
if (temp.attr('check') == 1) {
box.find(".showleft").children("span").each(function (index, element) {
if ($(this).attr('sel') == 1) {
if ($(this).attr('check') == 0) {
$(this).attr("sel", "0").removeClass("addstyle");
} else {
$(this).attr("sel", "0").addClass("addstyle");
};
}
});
box.find(".showleft").attr('first', 0);
box.find(".showright").children("span").each(function (index, element) {
if ($(this).attr('sel') == 1) {
if ($(this).attr('check') == 0) {
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0