1 Тема від Kasper

  • Kasper
  • Kasper
  • Користувач
  • Поза форумом
  • Дата реєстрації: 04.11.2015
  • Повідомлень: 114
    • Репутація: 39

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

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

2 Відповідь від ostap34PHP

  • Дата реєстрації: 27.01.2016
  • Повідомлень: 771
    • Репутація: 456

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

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

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

ostap34PHP вебсайт

3 Відповідь від Monolith

  • Monolith
  • Monolith
  • Replace Group
  • Поза форумом
  • Звідки: Звідси
  • Дата реєстрації: 29.07.2014
  • Повідомлень: 724
    • Репутація: 768

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

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

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

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

4 Відповідь від ostap34PHP

  • Дата реєстрації: 27.01.2016
  • Повідомлень: 771
    • Репутація: 456

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

ost.bregin2014 написав:

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

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

ostap34PHP вебсайт

5 Відповідь від ostap34PHP

  • Дата реєстрації: 27.01.2016
  • Повідомлень: 771
    • Репутація: 456

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

До речі, така тема вже була:http://replace.org.ua/topic/7712/ :)

ostap34PHP вебсайт

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

  • Kasper
  • Kasper
  • Користувач
  • Поза форумом
  • Дата реєстрації: 04.11.2015
  • Повідомлень: 114
    • Репутація: 39

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

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

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

7 Відповідь від ostap34PHP

  • Дата реєстрації: 27.01.2016
  • Повідомлень: 771
    • Репутація: 456

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

Kasper написав:

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

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

Але варто спитатись в людей з більшими знаннями :[

ostap34PHP вебсайт

8 Відповідь від ostap34PHP

  • Дата реєстрації: 27.01.2016
  • Повідомлень: 771
    • Репутація: 456

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

Kasper написав:

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

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

ostap34PHP вебсайт

9 Відповідь від ostap34PHP

  • Дата реєстрації: 27.01.2016
  • Повідомлень: 771
    • Репутація: 456

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

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

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

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

Вмієте?

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

ostap34PHP вебсайт

10 Відповідь від Kasper

  • Kasper
  • Kasper
  • Користувач
  • Поза форумом
  • Дата реєстрації: 04.11.2015
  • Повідомлень: 114
    • Репутація: 39

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

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

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

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

Вмієте?

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

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

11 Відповідь від 221VOLT

  • 221VOLT
  • 221VOLT
  • ♥ pattern matching
  • Поза форумом
  • Звідки: Львів
  • Дата реєстрації: 26.09.2015
  • Повідомлень: 2 719
    • Репутація: 1876

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

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

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

221VOLT вебсайт

12 Відповідь від Kasper

  • Kasper
  • Kasper
  • Користувач
  • Поза форумом
  • Дата реєстрації: 04.11.2015
  • Повідомлень: 114
    • Репутація: 39

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

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

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

13 Відповідь від ostap34PHP

  • Дата реєстрації: 27.01.2016
  • Повідомлень: 771
    • Репутація: 456

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

Kasper написав:

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

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

body{
   overflow:hidden;
}

ostap34PHP вебсайт

14 Відповідь від ostap34PHP

  • Дата реєстрації: 27.01.2016
  • Повідомлень: 771
    • Репутація: 456

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

Kasper написав:

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

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

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

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

ostap34PHP вебсайт

15 Відповідь від ostap34PHP

  • Дата реєстрації: 27.01.2016
  • Повідомлень: 771
    • Репутація: 456

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 >

ostap34PHP вебсайт