HTML5 - перетаскивание

Drag and Drop (DnD) - это мощная концепция пользовательского интерфейса, которая упрощает копирование, изменение порядка и удаление элементов с помощью щелчков мыши. Это позволяет пользователю щелкнуть и удерживать кнопку мыши над элементом, перетащить его в другое место и отпустить кнопку мыши, чтобы поместить элемент туда.

Чтобы добиться функциональности перетаскивания с помощью традиционного HTML4, разработчикам придется либо использовать сложное программирование на JavaScript, либо другие инфраструктуры JavaScript, такие как jQuery и т. Д.

Теперь в HTML 5 появился API Drag and Drop (DnD), который обеспечивает встроенную поддержку DnD в браузере, что значительно упрощает кодирование.

HTML 5 DnD поддерживается всеми основными браузерами, такими как Chrome, Firefox 3.5, Safari 4 и т. Д.

События перетаскивания

Есть ряд событий, которые запускаются на различных этапах операции перетаскивания. Эти события перечислены ниже -

Sr.No.	События и описание
1	dragstart Срабатывает, когда пользователь начинает перетаскивать объект.
2	dragenter Срабатывает, когда мышь впервые наводится на целевой элемент во время перетаскивания. Слушатель этого события должен указать, разрешено ли отбрасывание в этом месте. Если слушателей нет или слушатели не выполняют никаких операций, то удаление по умолчанию не разрешено.
3	dragover Это событие запускается, когда мышь перемещается по элементу при перетаскивании. В большинстве случаев операция, выполняемая во время прослушивания, будет такой же, как событие dragenter.
4	dragleave Это событие запускается, когда мышь покидает элемент во время перетаскивания. Слушатели должны удалить любые маркеры выделения или вставки, используемые для обратной связи.
5	drag Срабатывает каждый раз при перемещении мыши во время перетаскивания объекта.
6	drop Событие перетаскивания запускается для элемента, на котором произошло перетаскивание в конце операции перетаскивания. Слушатель будет отвечать за извлечение перетаскиваемых данных и их вставку в место перетаскивания.
7	dragend Срабатывает, когда пользователь отпускает кнопку мыши при перетаскивании объекта.

Note- Обратите внимание, что запускаются только события перетаскивания; события мыши, такие как mousemove , не запускаются во время операции перетаскивания.

Объект DataTransfer

Методы прослушивателя событий для всех событий перетаскивания принимают Event объект, который имеет атрибут только для чтения, называемый dataTransfer.

В event.dataTransfer возвращается DataTransfer объект, связанный с событием следующим образом -

function EnterHandler(event) {
   DataTransfer dt = event.dataTransfer;
   .............
}

Объект DataTransfer содержит данные об операции перетаскивания. Эти данные можно получить и установить с помощью различных атрибутов, связанных с объектом DataTransfer, как описано ниже:

Sr.No.	Атрибуты DataTransfer и их описание
1	dataTransfer.dropEffect [ = value ] Возвращает тип выбранной в данный момент операции. Этот атрибут можно установить, чтобы изменить выбранную операцию. Возможные значения: none, copy, link и move.
2	dataTransfer.effectAllowed [ = value ] Возвращает типы операций, которые должны быть разрешены. Этот атрибут можно установить, чтобы изменить разрешенные операции. Возможные значения: none, copy, copyLink, copyMove, link, linkMove, move, all и uninitialized.
3	dataTransfer.types Возвращает список DOMStringList, в котором перечислены форматы, заданные в событии dragstart. Кроме того, если перетаскиваются какие-либо файлы, то одним из типов будет строка «Файлы».
4	dataTransfer.clearData ( [ format ] ) Удаляет данные указанных форматов. Удаляет все данные, если аргумент не указан.
5	dataTransfer.setData(format, data) Добавляет указанные данные.
6	data = dataTransfer.getData(format) Возвращает указанные данные. Если таких данных нет, возвращает пустую строку.
7	dataTransfer.files Возвращает FileList перетаскиваемых файлов, если таковые имеются.
8	dataTransfer.setDragImage(element, x, y) Использует данный элемент для обновления обратной связи перетаскивания, заменяя любую ранее указанную обратную связь.
9	dataTransfer.addElement(element) Добавляет указанный элемент в список элементов, используемых для отображения обратной связи при перетаскивании.

Процесс перетаскивания

Ниже приведены шаги, которые необходимо выполнить для реализации операции перетаскивания.

Шаг 1 - Делаем объект перетаскиваемым

Вот шаги, которые необходимо предпринять -

• Если вы хотите перетащить элемент, вам нужно установить draggable приписывать true для этого элемента.

• Установите прослушиватель событий для dragstart в котором хранятся перетаскиваемые данные.

• Слушатель событий dragstart установит разрешенные эффекты (копирование, перемещение, ссылка или некоторая комбинация).

Ниже приведен пример, как сделать объект перетаскиваемым.

<!DOCTYPE HTML>

<html>
   <head>
      
      <style type = "text/css">
         
         #boxA, #boxB {
            float:left;padding:10px;margin:10px; -moz-user-select:none;
         }
         #boxA { background-color: #6633FF; width:75px; height:75px;  }
         #boxB { background-color: #FF6699; width:150px; height:150px; }
      </style>
      
      <script type = "text/javascript">
         
         function dragStart(ev) {
            ev.dataTransfer.effectAllowed = 'move';
            ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
            ev.dataTransfer.setDragImage(ev.target,0,0);
            
            return true;
         }
      </script>
      
   </head>
   <body>
      
      <center>
         <h2>Drag and drop HTML5 demo</h2>
         <div>Try to drag the purple box around.</div>
         
         <div id = "boxA" draggable = "true" 
            ondragstart = "return dragStart(ev)">
            <p>Drag Me</p>
         </div>
         
         <div id = "boxB">Dustbin</div>
      </center>
      
   </body>
</html>

Это даст следующий результат -

Шаг 2 - Отбрасывание объекта

Чтобы принять перетаскивание, цель перетаскивания должна прослушать как минимум три события.

• В dragenterсобытие, которое используется для определения того, должна ли цель перетаскивания принять перетаскивание. Если сброс должен быть принят, то это событие должно быть отменено.

• В dragoverсобытие, которое используется для определения того, какая обратная связь будет показана пользователю. Если событие отменено, то обратная связь (обычно курсор) обновляется на основе значения атрибута dropEffect.

• Наконец, drop событие, которое позволяет выполнить сброс.

Ниже приведен пример перетаскивания объекта в другой объект.

<html>
   <head>
      <style type="text/css">
         #boxA, #boxB {
            float:left;padding:10px;margin:10px;-moz-user-select:none;
         }
         #boxA { background-color: #6633FF; width:75px; height:75px;  }
         #boxB { background-color: #FF6699; width:150px; height:150px; }
      </style>
      <script type="text/javascript">
         function dragStart(ev) {
            ev.dataTransfer.effectAllowed='move';
            ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
            ev.dataTransfer.setDragImage(ev.target,0,0);
            return true;
         }
         function dragEnter(ev) {
            event.preventDefault();
            return true;
         }
         function dragOver(ev) {
            return false;
         }
         function dragDrop(ev) {
            var src = ev.dataTransfer.getData("Text");
            ev.target.appendChild(document.getElementById(src));
            ev.stopPropagation();
            return false;
         }
      </script>
   </head>
   <body>
      <center>
         <h2>Drag and drop HTML5 demo</h2>
         <div>Try to move the purple box into the pink box.</div>
         <div id="boxA" draggable="true" ondragstart="return dragStart(event)">
            <p>Drag Me</p>
         </div>
         <div id="boxB" ondragenter="return dragEnter(event)" ondrop="return dragDrop(event)" ondragover="return dragOver(event)">Dustbin</div>
      </center>
   </body>
</html>

Это даст следующий результат -