В этой статье я расскажу о том, как работает перетаскивание объектов в HTML5.
Для начала создадим файл index.html, папки js и css. В папке js создадим файл common.js, а в папке css создадим файл style.css
Теперь напишем разметку в файле index.html
Теперь напишем стили в файле style.css
В результате в браузере увидим следующее
Перейдем в файл common.js и начнем писать код. В начале повесим на объект window событие load, которое будет вызвано после того, как страница полностью загрузится.
Затем объявим необходимые переменные:
Переменная count - это счетчик для того, чтобы можно было присваивать уникальные id перемещаемым элементам. В переменной posX сохраним позицию курсора по иксу относительно панели с классом p-right, а в переменной posY сохраним позицию по игреку. В переменной blockPosX сохраним позицию курсора по иксу относительно перемещаемого элемента, а в переменную blockPosY сохраним позицию по игреку. В переменной panelLeft сохраним элемент с классом p-left, а в переменной panelRight сохраним элемент с классом p-right.
Теперь на panelLeft повесим событие mousedown и проверим, имеется ли класс block у элемента, на котором было вызвано событие mousedown. Если это так, меняем курсор и сохраняем в переменную blockPosX позицию курсора по иксу относительно элемента, а в переменную blockPosY сохраняем позицию по игреку.
Так же повесим на div элемент panelLeft событие mouseup. Проверим, существует ли у элемента класс block и, если существует. изменим курсор.
Затем повесим на panelLeft событие dragstart - это событие вызывается в тот момент, когда начинается перемещение элемента мышкой. При вызове этого события сохраним id перемещаемого элемента при помощи метода setData() объекта dataTransfer. Первым параметром передаем в метод тип сохраняемых данных, в нашем случае это простой текст, а вторым параметром - собственно id элемента.
Перейдем к событию dragend и повесим его также на элемент panelLeft. Это событие вызывается в тот момент, когда перемещение элемента завершено. При возникновении события dragend изменим курсор.
Теперь мы повесим точно такие же события на элемент panelRight
Также повесим на блок panelRight событие dragenter - это событие вызывается в тот момент, когда перемещаемый элемент оказывается над блоком для перемещения элемента. В нашем случае это div с классом panelRight. Нам не требуется выполнять никаких действий при вызове события dragenter, поэтому просто вызовим e.preventDefault().
Еще добавим событие dragover - это событие возникает в тот момент, когда перетаскиваемый элемент перемещается над областью, в которую должен быть помещён. В этом событии первым делом вызываем метод e.preventDefault(), а затем сохраняем в переменные координаты курсора.
Завершаем всё добавлением события drop - это событие возникает в тот момент когда, объект перемещен в необходимую область. В нашем случае в div с классом panelRight. В первую очередь получим id перемещаемого элемента, а затем получим сам элемент. Далее проверяем: если атрибут элемента data-type равен proto, то это значит, что нам необходимо дублировать элемент в правый div. Увеличиваем переменную count, клонируем элемент методом cloneNode(), меняем id, добавляем к существующему id знак подчеркивания и переменную count. Значение атрибута data-type меняем на elem. Добавляем класс pos и меняем вид курсора. Далее идет проверка, является ли значение атрибута data-type elem. и, если это так, значит перемещаемый элемент уже находится в правом элементе div. А это значит. нам надо просто его переместить на новое место. Свойству position задаем значение absolute. Для предотвращения ухода границ блока за пределы блока panelRight проверим, чтобы переменные posX и posY были не меньше нуля. Если какое-либо условие срабатывает, просто устанавливаем переменную в ноль. В конце присваиваем свойству top значение posX, а свойству left значение posY.
В браузере наше приложение будет выглядеть следующим образом:
Если надо просто переместить элемент из левого блока div в правый не дублируя, тогда в конец блока if(el.getAttribute(‘data-type’) == ‘proto’) добавим строчку el.remove();
А строку cpElem.setAttribute(‘id’, id+”_”+count) удаляем, т.к. менять id в данном случае не понадобится. На этом всё!
