Сделать jQuery-ui перетаскиваемой ручкой на всю страницу - PullRequest
Новая
       15

Сделать jQuery-ui перетаскиваемой ручкой на всю страницу

1 голос
/ 02 июня 2010

Каков наилучший способ сделать элемент перетаскиваемым при нажатии в любом месте окна?

Должен ли я использовать контейнер <div>, закрывающий все окно?

Я пытался сделать body перетаскиваемым, но это не сработало.

Проблема с использованием контейнера <div> заключается в том, что он перемещается и, следовательно, больше не покрывает весь экран после его перетаскивания.

Как насчет создания действительно огромного контейнера <div>, который охватывает большое количество пикселей во всех направлениях, чтобы вы никогда не добрались до его края. Это плохая идея?

Идея (упрощенная) состоит в том, чтобы иметь страницу с квадратом в середине, которую можно перетаскивать, перетаскивая любую часть окна.

Вот чудесно ненужный макет:)

альтернативный текст http://i49.tinypic.com/2ni4lqx.png

Я пытаюсь с полноэкранным div, но когда я сбрасываю его, элемент внутри него возвращается вместе с ним .. http://jsfiddle.net/LUFf6/

Ответы [ 2 ]

2 голосов
/ 03 июня 2010

РЕДАКТИРОВАТЬ: исправлено, чтобы включить смещение мыши от деления. 

<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>
1 голос
/ 02 июня 2010

это действительно зависит от того, чего вы пытаетесь достичь, поэтому нам нужно знать немного больше на самом деле.
Вы можете просто переместить перетаскиваемый div в верхний левый угол экрана и на полную ширину / высоту после каждого события «drop»?

Лично я бы не пошел по маршруту "огромный контейнер".

...