Drag & Drop в пределах области

[Avenus]

Drag & Drop в пределах области

Научился перемещать объекты на странице с помощью drag&drop. Но по всей странице.
Подскажите, пожалуйста, как сделать перемещение нескольких слоев с помощью drag&drop внутри ограниченной области div.
Пример: также как в Google Maps передвигается карта внутри области.

 

[WP]

А какие проблемы проверять находится ли указатель в пределах той области? Координаты ведь известны.

 

[Avenus]

Проблемы в том, что я не могу сделать также как в Google Maps перемещение, т.е. у меня в пределах области перемещается слой, но с одного места на другое.

Т.е. надо переместится по изображению, а не полностью его передвинуть

 

[Magz]

Можно попробовать назначить у дива фоновое изображение, а при движение мыши изменять положение бэкграунда.

 

[Avenus]

Magz да, ты прав... я сделал именно так
Только теперь мучаюсь над решением остановки перемещения в момент, когда достигается край изображения...

 

[Magz]

А если сделать background: repeat; то оно зациклится, по идее, и будет просто с другого конца показываться

 

[Avenus]

не-е... так не пойдет... Это же смешно

 

[Trike]

Как вариант:
http://interface.eyecon.ro/demos/drag.html
создать слоями "окно", через которое таскать div с картой. Размер ограничивающего дива задать таким, чтобы кусок child всегда был виден в "окне".

 

[Pabla]

Можно определить границы слоя и координаты мыши, и если координаты мыши вне пределов слоя, то прекращать перетаскивание. Как-то так.

 

[Magz]

Нужно хранить координату левого верхнего угла фонового изображения относительно дива. Так же, знать ширину и высоту изображения. При загрузке, координата, например,

Coord = Array ({Left: 0, Top: 0});

При движении проверяем, чтобы эти координаты не становились положительными, т.е. чтобы Coord.Left + перемещение мыши по горизонтали не было больше 0. Тоже самое для Coord.Top, только с перемещением по вертикали. Этим мы обезопасим себя от вылезания слева.
Чтобы не вылезало справа, нужно чтобы сумма Coord.Left и ширины картинки была меньше ширины дива, в котором картинка прокручивается. Например, див у нас 10 пикселей, картинка 20. Получается, что в начале 10 пикселей за правой границей дива. Подвинули влево на 10 пикселей. Coord.Left = -10; 20 + (-10) = 10. Если мы подвинем еще влево на пиксель, то будет 9, а это уже получится переборчик
Понятно или только запутал?

 

[Avenus]

Magz попробовал сделать так, работает только при перетаскивании определенного изображения внутри div.
У меня же как в Google Maps новые куски подгружаются при перемещении и получается, что новое изображение опять не достигло пределов.
Попробую этот же вариант только считать координаты не изображения, а внутреннего div.

 

[Magz]

Но ты же знаешь полные размеры изображения? Значит, при загрузке Coord устанавливаешь не в 0,0, а соответственно загруженному куску. Я не прав?