Pull to refresh
4
0
Send message

Метод создания DRAG and DROP эффекта

Reading time 3 min
Views 22K
Придя впервые к технологии DRAG and DROP столкнулся с очень тяжелым её описанием (Это мое субъективное мнение. Прошу с ним не соглашаться, а перечитать все что только можно и посмотреть на этот вопрос с многих сторон). И решил написать пару статей, нацеленных на начинающих разработчиков, кто хочет познать дзен.

Статья будет состоять из двух частей:

  • Метод создания DRAG and DROP эффектов.
  • Практическое применение полученных знаний для создание сортировки при помощи DRAG and DROP

Параграф №1 Метод создания DRAG and DROP эффекта


Перед началом глубокого разбора, посмотрим поверхностно. Представьте себя в роли грузчика, вам необходимо перемесить коробку с одного места на другое. Для грузчика это «Ну взял, ну перенес. Готово!», а для программиста “Подошел к коробке, наклонился, взял коробку, поднял коробку, прошел N шагов, наклонился, отпустил коробку.”. Я это к тому, что перед началом работы проиграйте все в голове, по шагам и вы станете гораздо ближе к истине.

Я хочу оговориться, что методов создания данного эффекта несколько и обязательно прочтите о всех. Я воспользуюсь тем, который на данный момент считаю самым удобным.

При создании DRAG and DROP первым шагом необходимо объекту, который мы будем перемещать, присвоить значение draggable='true'.

<html>
  <head>
    <style>
      .ddd {
	display:block;
	float:left;
	padding:10px;
	border:1px solid #000;
      }
    </style>
  </head>
  <body>
    <div id='d1' class='ddd' draggable='true'>Pervii 1</div>
  </body>
</html>

Читать дальше →
Total votes 14: ↑12 and ↓2 +10
Comments 6

Information

Rating
Does not participate
Registered
Activity