컨테이너 내의 드래그 가능한 요소 제한하기

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

하단 위치보다 작