限制容器内的可拖动元素

Question

我已经制作了一个不使用jquery ui库的可拖动div，但是我想让可拖动框不离开它的容器。

这里是我的demo

$(document).ready(function() { 
    var $dragging = null; 

    $(document.body).on("mousemove", function(e) { 
     if ($dragging) { 
      $dragging.offset({ 
       top: e.pageY, 
       left: e.pageX 
      }); 
     } 
    }); 

    $(document.body).on("mousedown", ".box", function (e) { 
     $dragging = $(e.target); 
    }); 

    $(document.body).on("mouseup", function (e) { 
     $dragging = null; 
    }); 
});​ 

如何做到这一点？请注意，我没有使用JQUERY UI。

Answer 1

只要确保...

• 框的左边位置比容器的左侧位置更大，且
• 箱的正确位置（左位+框宽度）小于容器的正确位置，并
• 盒子的顶部位置高于所述容器的顶部位置时，和
• 框（顶部位置+框高度的底部位置）小于容器

---

http://jsfiddle.net/KdehU/2/

$(document).ready(function() { 
    var $dragging = null; 

    var container = $('#container'), 
     c_t = container.offset().top, 
     c_l = container.offset().left, 
     c_b = c_t + container.height(), 
     c_r = c_l + container.width(); 

    $(document.body).on("mousemove", function(e) { 
     if ($dragging) { 
      var width = $dragging.width(); 
      var height = $dragging.height(); 

      var new_y = (e.pageY > c_t && (e.pageY + height) < c_b) ? e.pageY : undefined; 
      var new_x = (e.pageX > c_l && (e.pageX + width) < c_r) ? e.pageX : undefined; 

      $dragging.offset({ 
       top: new_y, 
       left: new_x 
      }); 
     } 
    }); 

    $(document.body).on("mousedown", ".box", function (e) { 
     $dragging = $(e.target); 
    }); 

    $(document.body).on("mouseup", function (e) { 
     $dragging = null; 
    }); 
}); 

的底部位置