Версия для печати темы Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Общие вопросы > перетавскивание элементов

Автор: Areostar 26.1.2021, 12:28

Вопрос как лучше реализовать перетаскивание элементов по странице? Легко нагугливается чтото вроде: https://learn.javascript.ru/drag-and-drop Но тм пока мышку не отпустиш то картинка на месте остаётся а у курсора отображается его подобие. представне что на странице находится несколько дивов представляющее чтото вроде ценников, визиток или чтото вроде того как их можно мыкой перекладывать в разные места или друг под дружку подпихивать?? имеется вариант рисования на канвасе. но это под задумку не очень подходит (( есть ещё варианты кроме канваса??

Автор: Oldshelf 26.1.2021, 13:30

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 ) Но тм пока мышку не отпустиш то картинка на месте остаётся а у курсора отображается его подобие. Посмотрите "Итоговый код с правильным позиционированием" и его демонстрацию (в конце заметки).

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)