1

Тема: Переміщення div блоку при руху миші

Привіт. Є блок 5к на 5к пікселів. Область видимості цього блока 1к на 1к (приблизно), хочеться реалізувати наступне., щоб коли юзер зажимав кнопку миші і рухав нею то сторінка скролилася і область яка відображається на екрані мінялася. Саму суть як це має відбуватися кажеться я розумію, тільки ось не получається зробити. Коли ми зажимаємо кнопку (onmousedown) перевіряємо чи є рух миші (onmousemove) після чого скролимо сторінку відносно руху миші. На словах наче нічого складного нема) питання наступне... може хтось натикався в неті на щось подіюне щоб я зміг подивитися приклад коду.

2

Re: Переміщення div блоку при руху миші

https://jqueryui.com/draggable/ таке?

"Лупайте сю скалу!" - Іван Франко
Подякували: Kasper1

3

Re: Переміщення div блоку при руху миші

https://learn.javascript.ru/mouse-clicks - дуже віддалено.

Але якщо чесно я не зовсім зрозумів, що Ви хочете зробити...

Подякували: Kasper1

4

Re: Переміщення div блоку при руху миші

ost.bregin2014 написав:

https://jqueryui.com/draggable/ таке?

Це готовий варіант на Jquery UI

"Лупайте сю скалу!" - Іван Франко

5

Re: Переміщення div блоку при руху миші

До речі, така тема вже була:http://replace.org.ua/topic/7712/ :)
"Лупайте сю скалу!" - Іван Франко

6 Востаннє редагувалося Kasper (13.03.2017 15:33:34)

Re: Переміщення div блоку при руху миші

м... не зовсім те.. Хтось грав в стратегію Strounghold ? Ось там точно така ж ситуація. Є велика карта по якій рухається гравець, і щоб подивитися іншу область карти ви повинні зажати мишку і порухати нею в любу сторону тоді одна частина карти яка віджображалася у вас на екрані ховається, а появляється інша

Подякували: ostap34PHP1

7

Re: Переміщення div блоку при руху миші

Kasper написав:

м... не зовсім те.. Хтось грав в стратегію Strounghold ? Ось там точно така ж ситуація. Є велика карта по якій рухається гравець, і щоб подивитися іншу область карти ви помині зажати мишку і порухати нею в любу сторону тоді одна частина карти яка віджображалася у вас на екрані ховається, а появляється інша

Таке я не знаю як зробити, це складно, і таке можна зробити хіба в canvas JS..........

Але варто спитатись в людей з більшими знаннями :[
"Лупайте сю скалу!" - Іван Франко

8

Re: Переміщення div блоку при руху миші

Kasper написав:

м... не зовсім те.. Хтось грав в стратегію Strounghold ? Ось там точно така ж ситуація. Є велика карта по якій рухається гравець, і щоб подивитися іншу область карти ви повинні зажати мишку і порухати нею в любу сторону тоді одна частина карти яка віджображалася у вас на екрані ховається, а появляється інша

Так зробіть цілу сторінку Draggable Jquery UI, тоді вона ціла буде суватись, виходити за краї і тд! спробуйте!
"Лупайте сю скалу!" - Іван Франко

9

Re: Переміщення div блоку при руху миші

ost.bregin2014 написав:
Kasper написав:

м... не зовсім те.. Хтось грав в стратегію Strounghold ? Ось там точно така ж ситуація. Є велика карта по якій рухається гравець, і щоб подивитися іншу область карти ви повинні зажати мишку і порухати нею в любу сторону тоді одна частина карти яка віджображалася у вас на екрані ховається, а появляється інша

Так зробіть цілу сторінку Draggable Jquery UI, тоді вона ціла буде суватись, виходити за краї і тд! спробуйте!

Вмієте?

"Лупайте сю скалу!" - Іван Франко
Подякували: Kasper1

10

Re: Переміщення div блоку при руху миші

ost.bregin2014 написав:
ost.bregin2014 написав:
Kasper написав:

м... не зовсім те.. Хтось грав в стратегію Strounghold ? Ось там точно така ж ситуація. Є велика карта по якій рухається гравець, і щоб подивитися іншу область карти ви повинні зажати мишку і порухати нею в любу сторону тоді одна частина карти яка віджображалася у вас на екрані ховається, а появляється інша

Так зробіть цілу сторінку Draggable Jquery UI, тоді вона ціла буде суватись, виходити за краї і тд! спробуйте!

Вмієте?

Спробую так як ви сказали. Дякую.

Подякували: ostap34PHP1

11

Re: Переміщення div блоку при руху миші

можна просто змінювати абсолютну позицію блока при "перетяненні мишею" --
display:block; width:N1; height:N2; position:absolute; left:M1; top:M2;

Все на світі, як вода, Світла радість і біда. Все тече і все біжить в нікуди,
Все на світі, як пісок, Залиши на ньому крок, Змиє все вода, було й так буде.

telegram: @TTaraskin
Подякували: Monolith, ostap34PHP2

12

Re: Переміщення div блоку при руху миші

ost.bregin2014, скористався вашою порадою. Рухати блок вдалося, тільки ось об'єкти які знаходилися на тому блоці що ми переміщаємо не рухалися + в майбутньому вони будуть переміщатися по блоці самостійно, тому я вирішив не думати як то все обминати і все ж написав код сам. Загалом я довольний, вдалося реалізувати так як я хотів. Кому цікаво можете подивитися і поправити якщо десь каряво зроблено, в цьому я не сумніваюся.
https://jsfiddle.net/6bL4oqh4/
потрібно ще приховати полосу прокрутки і змінити іконку курсора коли рухаєш ігрове поле, але це вже дрібниці.

Подякували: 221VOLT, Monolith, ostap34PHP3

13

Re: Переміщення div блоку при руху миші

Kasper написав:

потрібно ще приховати полосу прокрутки і змінити іконку курсора коли рухаєш ігрове поле, але це вже дрібниці.

можна приховати прокрутку так:

body{
   overflow:hidden;
}
"Лупайте сю скалу!" - Іван Франко

14

Re: Переміщення div блоку при руху миші

Kasper написав:

потрібно ще приховати полосу прокрутки і змінити іконку курсора коли рухаєш ігрове поле, але це вже дрібниці.

А курсор змінити можна так:

a {
    cursor: url("http://htmlbook.ru/example/images/sniper.cur"), pointer;
}

ось приклад з курсором http://htmlbook.ru/css/cursor
ось з полосою прокрутки: http://htmlbook.ru/css/overflow

"Лупайте сю скалу!" - Іван Франко

15

Re: Переміщення div блоку при руху миші

ost.bregin2014 написав:
Kasper написав:

потрібно ще приховати полосу прокрутки і змінити іконку курсора коли рухаєш ігрове поле, але це вже дрібниці.

А курсор змінити можна так:

a {
    cursor: url("http://htmlbook.ru/example/images/sniper.cur"), pointer;
}

ось приклад з курсором http://htmlbook.ru/css/cursor
ось з полосою прокрутки: http://htmlbook.ru/css/overflow

тільки застусуйте для тега body, а не для < a >
"Лупайте сю скалу!" - Іван Франко