日期:2014-05-16 浏览次数:20510 次
rangeMoveFunc : function(obj,e,x,y){//obj為圖片對象,x為圖片所移動的位置,也就是x = e.pageX//當前移動座標 - (downX//mousedown時的e.pageX; - obj.offset().left)
var thisWidth = obj.width();
var thisHeight = obj.height();
var rx,ry;//圖片所能移動的座標,當rx,ry為undefined時, rx = x;ry = y;
var left,top,right,bottom;//牆壁的位置
wallObj.each(function(){
var offset = $(this).offset();
switch($(this).attr('pos'))//我定義了牆壁的方向,按牆壁的方向來判斷圖片所移動的位置
{
case 'left' :
left = offset.left + $(this).width();
top = offset.top - thisHeight;
bottom = offset.top + $(this).height();
if(!rx && x < left && y > top && y < bottom){
rx = left;
}
break;
case 'top' :
top = offset.top + $(this).height();
left = offset.left - thisWidth;
right = offset.left + $(this).width();
if(!ry && y < top && x > left && x < right){
ry = top;
}
break;
case 'right' :
right = offset.left - thisWidth;
top = offset.top - thisHeight;
bottom = offset.top + $(this).height();
if(!rx && x > right && y > top && y < bottom){
rx = right;
}
break;
case 'bottom' :
bottom = offset.top - thisHeight;
left = offset.left - thisWidth;
right = offset.left + $(this).width();
if(!ry && y > bottom && x > left && x < right){
ry = bottom;
}
break;
}
if(rx && ry){
return false;
}
})
return [rx,ry];
}
------解决方案--------------------
总能获得6个div的四个顶点的坐标吧 用坐标判断试试可以不
------解决方案--------------------
单个div的范围是很好判断的。。if(你鼠标的点(如果你拖的时候鼠标是在左上或者中心你还要计算宽度。)超出了。){就不让你的div过去。}在你的mousemove的时候你是可以获取不断变化的坐标的。。然后循环判断是否在某一个div的范围。在要出的时候写个判断 判断你当前所在div和你要出的方向,方向的判断你可以继续上一个坐标值,然后把方向判断出来了就判断对应方向的那条div的边继续往后走是否仍然是某个div的内部 如果是的话就允许移动。如果判断出对应方向那条边继续往后走已经不是某一个div了 就判断此边为墙壁。禁止继续增/减 top或left。。