コンテナ内のドラッグ可能な要素の制限

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; 
    }); 
}); 

の底位置よりも小さいです