1

单击窗口中的任何位置时,使元素可拖动的最佳方法是什么?

我是否必须使用<div>覆盖整个窗户的容器?

我尝试制作body可拖动的,但没有奏效。

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

如何制作一个非常大的容器<div>,它在各个方向都跨越大量像素,这样你就永远不会到达它的边缘。这是个坏主意吗?

这个想法(简化)是有一个中间有一个正方形的页面,可以通过拖动窗口的任何部分来拖动。

这是一个非常不必要的模型:)

替代文字

我正在尝试使用全屏 div,但是当我重置它时,其中的元素会随之移回.. http://jsfiddle.net/LUFf6/

4

2 回答 2

2

编辑:修改为包括从 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>
于 2010-06-02T20:53:03.137 回答
1

这实际上取决于您要实现的目标,因此我们需要了解更多。
您可以在每个“放置”事件之后将可拖动的 div 移动到屏幕的左上角和全宽/高度吗?

不过,我个人不会走“巨大的集装箱”路线。

于 2010-06-02T15:47:34.850 回答