js拖动至固定某一个点

最新推荐文章于 2019-05-20 18:10:47 发布

何麒

最新推荐文章于 2019-05-20 18:10:47 发布

阅读量964

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/liulangdeshusheng/article/details/48026893

版权

javascript 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../../css/common.css">
<link rel="stylesheet" href="../../lib/boxy/boxy.css">
<link rel="stylesheet" href="../../bootstrap-3.3.4/css/bootstrap.min.css">
<style type="text/css">
#fenpeibiao{width: 98%}
#fenpeibiao th{background: #00349E; color: white;}
#fenpeibiao td{text-align: center;}
#fenpeibiao tr.s{background:#E7E7EF }
#fenpeibiao tr.d{background:#CBCCDE }
.cc td{font-weight: bold;}
.zujian{width: 1000px;}
.zujian td{text-align: center;height: 90px}
.drag{cursor:move;position:absolute;margin-top: 20px;width:143px;height: 73px }

</style>

<script type="text/javascript" src="../../js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="../../js/underscore1.8.2.js"></script>
<script type="text/javascript" src="../../bootstrap-3.3.4/js/bootstrap.min.js"></script>
<title></title>

<script type="text/javascript">
var Point = {
createNew:function(){
var point = {};
point.x = 0;
point.y = 0;
point.flag = false;
return point;
}
}

var points = [];
$(function(){
/*--------------拖曳效果----------------
*原理：标记拖曳状态dragging ,坐标位置iX, iY
* mousedown:fn(){dragging = true, 记录起始坐标位置，设置鼠标捕获}
* mouseover:fn(){判断如果dragging = true, 则当前坐标位置 - 记录起始坐标位置，绝对定位的元素获得差值}
* mouseup:fn(){dragging = false, 释放鼠标捕获，防止冒泡}
*/
var dragging = false;
var currentDrag;
var iX, iY,oX,oY;
var beginY = $("#mx").offset().top;
var beginX = $("#mx").offset().left;
initPoints();
$(".drag").mousedown(function(e) {
dragging = true;
currentDrag = this;
/* alert(this.offsetLeft+"=="+ this.offsetTop); */
iX = e.clientX - this.offsetLeft;
iY = e.clientY - this.offsetTop;
this.setCapture && this.setCapture();
return false;
});
document.onmousemove = function(e) {
if (dragging) {
var e = e || window.event;
oX = e.clientX - iX;
oY = e.clientY - iY;
$(currentDrag).css({"left":oX + "px", "top":oY + "px"});
return false;
}
};
$(document).mouseup(function(e) {
dragging = false;
//currentDrag.releaseCapture();
/* alert(oX+"=="+oY+":"+ beginX+"=="+beginY); */

for(var i=0;i< points.length;i++){
px = points[i].x + beginX;
py = points[i].y +beginY;
var temp =0 ;
if( $(currentDrag).attr("lang") === "km" ){
temp = 48;
}else{
temp = 64;
}
var curY = temp+ oY;
var curX = oX-4;
var l = (px-curX)*(px-curX)+(py - curY)*(py - curY);
if(l < 1600){
$(currentDrag).css({"left":(px-7)+ "px", "top": (py-temp+9) + "px"});
var name = $(currentDrag).attr("name");
if( i == parseInt(name)){
points[i].flag = true;
}else{
points[i].flag = false;
}
return false;
}
}

e.cancelBubble = true;
})

function initPoints(){
var x0 = Point.createNew();
x0.x = 73;
x0.y = 59;
points.push(x0);

var x1 = Point.createNew();
x1.x = 73;
x1.y = 173;
points.push(x1);

var x2 = Point.createNew();
x2.x = 73;
x2.y = 284;
points.push(x2);

var com = Point.createNew();
com.x = 73;
com.y = 381;
points.push(com);

var y0 = Point.createNew();
y0.x = 515;
y0.y = 97;
points.push(y0);

var y1 = Point.createNew();
y1.x = 515;
y1.y = 230;
points.push(y1);

var com1 = Point.createNew();
com1.x = 515;
com1.y = 359;
points.push(com1);

var km2 = Point.createNew();
km2.x = 646;
km2.y = 97;
points.push(km2);

var km1 = Point.createNew();
km1.x = 644;
km1.y = 230;
points.push(km1);
}

})

function tijiao(){
var result = true;
for(var i =0;i<points.length;i++){
if(!points[i].flag){
result = false;
break;
}
}
if(result){
alert("ok!");
}else{
alert("no!");
}
}

</script>

</head>
<body style="background-color: #333333">

<div style="display: none;">
<img alt="" src="img/fuhao/end6.png" id="end">
<img alt="" src="img/fuhao/1.png" id="x21">
</div>


<div class="head">
<div class="rq" style="background-image: url('../../css/img/top.png');height: 199px">
<ul style="float: right;margin-top: 20px" class="menu">
<li><img alt="" src="../../css/img/shouye.png"> </li>
<li><img alt="" src="../../css/img/tuichu.png"> </li>
</ul>
</div>
</div>


<div align="center" style="background-color:#192431;height: 71px;">
<div class="rq" style="height: 71px;line-height: 71px;color: white;font-size: 30px;">
项目一  运料车装卸材料控制
</div>
</div>


<div >
<div class="rq" style="margin-top: 20px">
<div>
<img alt="" src="../../css/img/biaoqian3.png" border="0" usemap="#planetmap">

<map name="planetmap" id="planetmap">
<area shape="rect" coords="575,0,738,50" href ="biancheng.html" alt="Venus" />
<area shape="rect" coords="389,0,552,50" href ="dianlu.html" alt="Venus" />
<area shape="rect" coords="203,0,366,50" href ="fenxi.html" alt="Mercury" />
<area shape="rect" coords="17,0,180,50" href ="shuoming.html" alt="Sun" />
</map>
</div>

<div style="height: 1200px;background-color: white;border: 10px solid #515151;">
<div style="width: 100%;height: 380px;padding: 10px;text-indent: 20px;line-height: 30px;">
<p>
应用PLC技术实现对电动机的“正、反转”控制。控制电路中有3个输入按钮，分别是SB1、SB2、SB3，是PLC的输入变量，
须接在PLC的三个输入端子上，可分配为X0、X1、X2；2个输出，分别为KM1和KM2，作为PLC输出端需要控制的设备，要占用两个输出端子，可分配为Y0和Y1。
在控制电路中，按钮SB1、SB2和接触器KM1、KM2的辅助触点还实现自锁、互锁，用于自锁、互锁的触点由PLC内部的“软开关”代替，故不占用I/O端口。
整个系统需要用PLC的5个I/O端口，I/O分配如表所示：
</p>
<table id="fenpeibiao">
<thead>
<tr>
<th colspan="3">输入设备及地址编号</th>
<th colspan="3">输出设备及地址编号</th>
</tr>
<tr class="cc d">
<td style="width:20% ">名称</td>
<td style="width:10% ">代号</td>
<td>输入点 地址编号</td>
<td>名称</td>
<td style="width:10% ">代号</td>
<td>输出点 地址编号</td>
</tr>
<tr class="s">
<td >正转启动按钮</td>
<td>SB1</td>
<td>X0</td>
<td >正转交流接触器</td>
<td>KM1</td>
<td>Y0</td>
</tr>
<tr class="d">
<td >反转启动按钮</td>
<td>SB2</td>
<td>X1</td>
<td>反转交流接触器</td>
<td>KM2</td>
<td>Y1</td>
</tr>
<tr class="s">
<td>停止按钮</td>
<td>SB3</td>
<td>X2</td>
<td></td>
<td></td>
<td></td>
</tr>
</thead>
</table>
<h6>请根据控制要求和I/O端口分配，完成PLC和外围设备的电路连接。其中X0、X1、X2共用一个“COM”端，Y0和Y1共用一个“COM”端。直流电源由PLC供给，交流电源则由外部交流电源供给的。</h6>
<p>
操作提示：
首先，将外围设备拖动到控制电路的相应位置，并与PLC的I/O端口连接；
然后，分别单击两个连接点，进行电路连线；
操作完成后，请按确认键。
</p>
</div>

<div style="width: 100%;height: 401px" align="center">
<img alt="" src="img/dl/10.png" style="vertical-align: middle;display: block;width: 820px;height: 401px" id="mx">
</div>
<h6 style="margin-left: 20px;color: blue;">请将下列组件拖动到上图合适位置</h6>
<div align="center" style="height: 300px">
<table class="zujian">
<tr>
<td><img alt="" src="img/dl/1.png" class="drag" lang="km" name="4"> </td>
<td><img alt="" src="img/dl/2.png" class="drag" lang="km" name="7" > </td>
<td><img alt="" src="img/dl/3.png" class="drag" lang="km" name="5"> </td>
<td><img alt="" src="img/dl/4.png" class="drag" lang="km" name="8"> </td>
<td><img alt="" src="img/dl/5.png" class="drag" lang="km" name="6"> </td>
</tr>
<tr>
<td><img alt="" src="img/dl/6.png" class="drag" lang="sb" name="0"> </td>
<td><img alt="" src="img/dl/7.png" class="drag" lang="sb" name="1"> </td>
<td><img alt="" src="img/dl/8.png" class="drag" lang="sb" name="2" > </td>
<td><img alt="" src="img/dl/9.png" class="drag" lang="km" name="3"> </td>
<td></td>
</tr>
</table>
</div>
<div align="center">
<button class="btn btn-primary" οnclick="tijiao()">    确认完成    </button>
</div>
</div>
</div>

<div class="rq" style="margin-top: 2px;height: 200px">
</div>
</div>

</body>
</html>