jQuery-ui 드래그 가능한 핸들 전체 페이지 커버하기

Question

윈도우의 아무 곳이나 클릭 할 때 요소를 드래그 할 수있게하는 가장 좋은 방법은 무엇입니까?

컨테이너 전체를 다루는 컨테이너 <div>을 사용해야합니까?

body을 드래그 가능으로 만들려고했으나 작동하지 않았습니다.

컨테이너를 사용할 때의 문제점 <div>은 끌었 기 때문에 더 이상 움직이지 않아서 전체 화면을 덮지 않습니다.

실제로 모든 방면에서 많은 수의 픽셀을 포함하는 매우 방대한 컨테이너 <div>을 만들면 결코 가장자리에 도달하지 않을 것입니다. 그게 나쁜 생각이야?

중간에 사각형이있는 페이지를 가지고 창의 일부를 드래그하여 드래그 할 수 있습니다.

여기 멋지고 불필요한 모형 :

alt text http://i49.tinypic.com/2ni4lqx.png

내가 전체 화면 사업부와 함께 노력하고있어,하지만 나는 그것을 다시 할 때, 그 안에 요소가 .. 다시와 이동 http://jsfiddle.net/LUFf6/

Answer 1

EDIT : div의 마우스 오프셋을 포함하도록 수정되었습니다.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script> 
<script> 
function doMove(e) { 
    var $d = $('#myDiv'); 
    var off = $d.offset(); 
    var left = e.pageX + $d.data('left'); 
    var top = e.pageY + $d.data('top'); 
    $d.offset({left: left, top: top}); 
}; 
$(function() { 
    $(document).mousedown(function(e) { 
    var $d = $('#myDiv'); 
    var off = $d.offset(); 
    $d.data('left',off.left - e.pageX); 
    $d.data('top',off.top - e.pageY);  
    $(document).bind('mousemove', doMove); 
    }).mouseup(function(e) { 
    $(document).unbind('mousemove',doMove); 
    }); 
}); 
</script> 
<style> 
div#myDiv { 
    width: 50px; 
    height: 50px; 
    background-color: red; 
    position: absolute; 
    top: 100px; 
    left: 100px; 
} 
</style> 
<div id="myDiv"></div> 

Answer 2

그것은 실제로 당신이 성취하고자하는 것에 달려 있습니다. 그래서 우리는 조금 더 알 필요가 있습니다.
draggable div를 화면의 왼쪽 상단으로 이동하고 각 너비/높이를 각 "drop"이벤트 후에 옮길 수 있습니까?

저는 개인적으로 '광대 한 컨테이너'경로를 따라 가지 않습니다.