|
Модераторы: Sardar, Aliance |
|
Areostar |
|
|||
Эксперт Профиль Группа: Завсегдатай Сообщений: 1191 Регистрация: 5.4.2008 Репутация: нет Всего: -2 |
Вопрос как лучше реализовать перетаскивание элементов по странице?
Легко нагугливается чтото вроде: https://learn.javascript.ru/drag-and-drop Но тм пока мышку не отпустиш то картинка на месте остаётся а у курсора отображается его подобие. представне что на странице находится несколько дивов представляющее чтото вроде ценников, визиток или чтото вроде того как их можно мыкой перекладывать в разные места или друг под дружку подпихивать?? имеется вариант рисования на канвасе. но это под задумку не очень подходит (( есть ещё варианты кроме канваса?? |
|||
|
||||
Oldshelf |
|
|||
Бывалый Профиль Группа: Участник Сообщений: 156 Регистрация: 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 секунды
Посмотрите "Итоговый код с правильным позиционированием" и его демонстрацию (в конце заметки). |
|||
|
||||
Форум для вопросов, которые имеются в справочниках, но их поиск вызвал затруднения, или для разработчика требуется совет или просьба отыскать ошибку. Напоминаем: 1) чётко формулируйте вопрос, 2) приведите пример того, что уже сделано, 3) укажите явно, нужен работающий пример или подсказка о том, где найти информацию. |
1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей) | |
0 Пользователей: | |
« Предыдущая тема | JavaScript: Общие вопросы | Следующая тема » |
|
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности Powered by Invision Power Board(R) 1.3 © 2003 IPS, Inc. |