Модераторы: Sardar, Aliance
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> перетавскивание элементов 
:(
    Опции темы
Areostar
Дата 26.1.2021, 12:28 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1191
Регистрация: 5.4.2008

Репутация: нет
Всего: -2



Вопрос как лучше реализовать перетаскивание элементов по странице?

Легко нагугливается чтото вроде:
https://learn.javascript.ru/drag-and-drop

Но тм пока мышку не отпустиш то картинка на месте остаётся а у курсора отображается его подобие.

представне что на странице находится несколько дивов представляющее чтото вроде ценников, визиток или чтото вроде того
как их можно мыкой перекладывать в разные места или друг под дружку подпихивать??

имеется вариант рисования на канвасе. но это под задумку не очень подходит ((

есть ещё варианты кроме канваса??
PM MAIL   Вверх
Oldshelf
Дата 26.1.2021, 13:30 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 155
Регистрация: 22.4.2018

Репутация: нет
Всего: 4



1. Создать массивы, содержащие координаты левого верхнего угла дивов и их z-index. Запомнить в переменную максимальный z-index.
2. Отобразить по данным этих массивов дивы (position:absolute, left:x, top:y). На каждый div повесить mousedown, активирующий drag-and-drop.
3. По клику на элемент присвоить ему z-index на единицу больше максимального и обновить значение переменной с наибольшим z-index'ом. Также начать отслеживать событие mousemove и по координатам указателя мышки изменять координаты div'а в массиве и на экране (top, left).
4. По событию mouseup отпустить элемент (не изменять больше координаты по mousemove).

В общих чертах так. Без canvas'а. Можно добавить на div'ы CSS-свойство transition для более плавного перемещения.

Добавлено через 13 минут и 54 секунды
Цитата(Areostar @  26.1.2021,  12:28 Найти цитируемый пост)
Но тм пока мышку не отпустиш то картинка на месте остаётся а у курсора отображается его подобие.

Посмотрите "Итоговый код с правильным позиционированием" и его демонстрацию (в конце заметки).
PM MAIL WWW   Вверх
  
Ответ в темуСоздание новой темы Создание опроса
Форум для вопросов, которые имеются в справочниках, но их поиск вызвал затруднения, или для разработчика требуется совет или просьба отыскать ошибку. Напоминаем: 1) чётко формулируйте вопрос, 2) приведите пример того, что уже сделано, 3) укажите явно, нужен работающий пример или подсказка о том, где найти информацию.
 
1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: Общие вопросы | Следующая тема »


 




[ Время генерации скрипта: 0.1142 ]   [ Использовано запросов: 21 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.