關於移動範圍問題,來者都有分！

Question

本帖最后由 jxsrsxyx 于 2012-05-31 16:19:43 编辑

Answer 1

沒看到嗎？
如果看不到的人就來這看吧
http://img.my.csdn.net/uploads/201205/31/1338452331_5909.png

Answer 2

我先貼上我的做法,是個回調函數
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];
}

Answer 3

為了方便測試，我把整合的代碼放上來,可以直接修改裏面的代碼看效果。修改js.html就可以了。
下載地址：
http://download.csdn.net/download/jxsrsxyx/4343112

Answer 4

总能获得6个div的四个顶点的坐标吧  用坐标判断试试可以不

Answer 5

单个div的范围是很好判断的。。if(你鼠标的点（如果你拖的时候鼠标是在左上或者中心你还要计算宽度。）超出了。)｛就不让你的div过去。｝在你的mousemove的时候你是可以获取不断变化的坐标的。。然后循环判断是否在某一个div的范围。在要出的时候写个判断 判断你当前所在div和你要出的方向，方向的判断你可以继续上一个坐标值，然后把方向判断出来了就判断对应方向的那条div的边继续往后走是否仍然是某个div的内部 如果是的话就允许移动。如果判断出对应方向那条边继续往后走已经不是某一个div了 就判断此边为墙壁。禁止继续增/减 top或left。。

Answer 6

至于 你在移动至 某div边的时候 你可以搞个提前量判断方向。然后自动靠边。就是说 可以做个小机关。在往某条边拖的时候 其实div还没靠上边，但是你可以设定一个标准，比如说在还差10的时候，就自动让div靠边。这个时候判断方向，应该不至于让div超出。

Answer 7

假如div圍城的是一個正方形的話是沒問題的，但是像圖上那樣的話,如果移動到我圖上話的地方就回出現問題,
大家可以先下載代碼看效果,再更改代碼已致不會移出後在給個鏈接給我或發個Email給我也可以。Thanks