极客观点
项目管理
HarmonyOS
如何给div限定移动边界呢，设置了_move=false但是当往回拖div的时候拖不动，还有一个问题是如何把移动过div的位置传到服务器呢。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<title> New Document </title>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<style type="text/css">
/*模块拖拽*/
.drag{position:absolute;
width:100px;
height:100px;
border:1px solid #ddd;
background:#FBF2BD;
text-align:center;
line-height:100px;
padding:5px;
top:100px;
left:390px;
cursor:move;
}
.box{ width:900px;
height:500px;
background:#AAA;
position:absolute;
top:36px;
left:50px;
}
</style>
<script type="text/javascript">
// 模块拖拽
$(function(){
var _move=false;//移动标记
var _x,_y;//鼠标离控件左上角的相对位置
$(".drag").each(function(index) {
$(this).text("机柜"+(index+1))//机柜编号
$(this).mousedown(function(e){
_move=true;
_x=e.pageX-parseInt($(this).css("left"));
_y=e.pageY-parseInt($(this).css("top"));
$(this).fadeTo(20, 0.5);
//点击后开始拖动并透明显示
}).mousemove(function(e){
if(_move){
var x=e.pageX-_x;//移动时根据鼠标位置计算控件左上角的绝对位置
var y=e.pageY-_y;
var left=$(this).position().left;
var top=$(this).position().top;
var _left=$(".box").position().left;
var _top=$(".box").position().top;
$(this).css({top:y,left:x});//新位置
if(left<=_left){
_move=false//限定边界
}
}
}).mouseup(function(){
_move=false;
$(this).fadeTo("fast", 1);//松开鼠标后停止移动并恢复成不透明
});
})
});
</script>
</head>
<body>
<div class="box">
<div class="drag"></div>
<div class="drag"></div>
<div class="drag"></div>
<div class="drag"></div>
<div class="drag"></div>
<div class="drag"></div>
</div>
</body>
</html>
你的问题在于
不松开鼠标往回拖动的时候
_move重置为true了吗？设定边界的时候大概应该这么写
坐标传递的话,具体看你们接口怎么设置的,格式无非就是键值对。