让jQuery-ui可拖动的句柄覆盖整个页面

问题描述

我会不得不使用一个容器<< p> ; div> 覆盖整个窗口？

我尝试使 body 可拖动但没有奏效。

使用容器< div> 的问题在于它移动并且因此在拖动后不再覆盖整个屏幕。

制作一个真正巨大的容器< div> 在每个方向上跨越大量的像素，所以你永远不会到达它的边缘。这是一个坏主意吗？

这个想法（简化）是在中间有一个正方形的页面，可以通过拖动窗口的任何部分来拖动。 / p>

以下是一个非常不必要的模型：）

我正在尝试用全屏div，但是当我重置它时，它内部的元素会随着它移动。

解决方案

编辑：修改为包含鼠标从div的偏移量。 b
$ b

 < script src =http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js> ;< /脚本> 
< script> 
函数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; 
背景颜色：红色; 
位置：绝对; 
 top：100px; 
 left：100px; 
} 
< / style> 
< div id =myDiv>< / div> 
  

What would be the best way to make an element draggable when clicking anywhere in the window?

Would I have to use a container <div> that covers the whole window?

I tried making the body draggable but that didn't work.

The problem with using a container <div> is that it moves and therefore doesn't cover the whole of the screen any more after it has been dragged.

What about making a really vast container <div> that spans a large number of pixels in every direction so you would never get to the edge of it. Is that a bad idea?

The idea (simplified) is to have a page with a square in the middle that can be dragged by dragging any part of the window.

Here's a wonderfully unnecessary mockup :)

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

I'm trying with a full screen div, but when I reset it, the element within it moves back with it.. http://jsfiddle.net/LUFf6/

解决方案

EDIT: revised to include mouse offset from the 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>

这篇关于让jQuery-ui可拖动的句柄覆盖整个页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！