HTML-код 5: перетаскивание в корзину

Без каких-либо фреймворков, демо с исходным кодом, чтобы перетащить его объекты.

Эта демонстрация предлагает выбрать предмет в магазине и перенести его в корзину... Это позволяет увидеть все атрибуты и методы стандарта HTML 5, необходимые для перемещения элементов на страницу.

Совместимость: IE 9, Chrome, Firefox .

Бутик Моя корзина

Стандарт HTML 5 для перетаскивания

Браузер реагирует на каждое действие пользователя с момента нажатия на объект и удерживает нажатой кнопку мыши до момента, когда он отпускает мышь:

  1. Взять объект на страницу: нажать и держать кнопку нажатой
    2. .
  2. Переместить объект на страницу.
  3. Отпустите кнопку мыши. Если это сделано в области, предназначенной для перемещения, объект физически копируется или перемещается на страницу.

Это предполагает добавление обработчиков событий к двум вовлеченным элементам: перемещаемому элементу и области, куда его можно переместить. В спецификации определен список событий и атрибутов, которые должны быть назначены элементам страницы...

Новые атрибуты HTML

draggable
Свойство draggable =» true» указывает, что элемент HTML может быть перемещен на страницу. Он бесполезен для некоторых элементов, которые могут перемещаться по умолчанию, например изображений. В примере корзины мы перемещаем изображения.
датировался стоившаяся друг друга
Значение этого атрибута используется для описания объекта, который можно переместить. Он будет использоваться обработчиками событий, если они хотят использовать обработку, зависящую от определенного объекта.
дропзоне
Атрибут контейнера, в который можно поместить объект. Значение этого атрибута не «true», но варьируется в зависимости от выданных разрешений. Для принятия PNG-файла изображения значение будет «file: image/png». Для текста это будет «string: text». Другие параметры могут быть включены в значение. Например, для перемещения добавляется значение «move».

Объект dataTransfer

Это интерфейс для объекта, перемещаемого в данный момент на страницу, которую может использовать код JavaScript. У нее есть атрибуты:

DOMString dropEffect
Для инициированного пользователем перемещения назначается тип операции: «copy» для копирования, «move» для перемещения, «link» для добавления ссылки на элемент inital или «none» для удаления. Это присваивается при запуске события dragstart
.
DOMString effectAllowed.
Назначается тип операции, допустимый для пользователя при входе объекта в область назначения, поэтому при срабатывании событий dragover и dragover. Назначение выполняется, когда пользователь вводит объект для перемещения, то есть в функцию, связанную с событием dragstart. К предыдущим типам операций добавляются «copyLink», «copyMove», «linkMove», «all» и «unitialized» (см. спецификацию их использования).
Элементы DataTransferItemList
Этот список связан с любым объектом dataTransfer. Только для чтения он позволяет вернуть список перемещенных элементов. Она имеет атрибут length, атрибут items и методы clear (), add (DOMString data, DOMString type), add (File data), а также команду delete, которая позволяет удалить элемент из списка к заданному
индексу.

А интерфейс имеет следующие методы :

setDragImage (элемент изображения, x, y
)
Чтобы назначить изображение движущемуся объекту, заменяя изображение, введенное пользователем.

Примечание: dataTransfer имеет другие методы, кроме спецификации, но нестандартные, поэтому они здесь не повторяются.

Новые события

Имена в этом списке используются как будто с надстройкой EventListener или перед «on» для использования в качестве атрибута любого HTML-тега.

С каждым объектом, который можно переместить, связаны два события.

dragstart
Этому событию присваивается функция, которая содержит обработку, когда пользователь инициирует перемещение.
дракенд
Это событие связано с объектом, который можно переместить, чтобы ответить на конец перемещения. В отличие от drop, он срабатывает даже при выходе объекта из зоны назначения, поэтому в нашем примере он выходит из корзины.

И четыре события касаются цели.

dragenter
Это событие возникает при попадании объекта на поверхность целевого контейнера.
драговер
Это событие добавляется к тегу контейнера. Оно срабатывает при наведении мыши.
dragleave
Срабатывает, когда отпускаешь предмет, который двигаешь. Если на странице несколько целей, он срабатывает, когда ты покидаешь одну цель, чтобы попасть в другую.
дроп
Это событие возникает, когда пользователь отпускает объект на поверхность тега контейнера.

Пример стандартного кода

Магазин в нашем примере содержит четыре объекта:

<fieldset id="shop" class="shop">
  <legend>La boutique</legend>
  <img class="product" id="chaise" src="image/chaise.jpg" width="96" height="96">
  <img class="product" id="moniteur" src="image/screen.jpg" width="96" height="96">
  <img class="product" id="valise" src="image/valise.jpg" width="96" height="96">
  <img class="product" id="transat" src="image/transat.jpg" width="96" height="96">
</fieldset>

Нужно знать, что так как наши объекты являются изображениями, они по умолчанию перемещаются. Если речь идет о других элементах, необходимо добавить статически растягиваемый атрибут, как показано ниже, или динамически в JavaScript, как это делает код ниже:

<div class="product" draggable="true">
      <img src="images/chaise.jpg" width="96" height="96">
</div>

Корзина пользователя может быть любого типа тег контейнера. Поскольку используется филдсет, содержащий легендарный тег, к нему добавляется слой, чтобы изначально иметь пустой контейнер:

<fieldset id="mycart" class="cart"><legend>Mon panier</legend>  
  <div id="cartArea"></div>
</fieldset>

Вот полный код JavaScript, работу которого мы объясним ниже :

<script>
var cartArea = document.querySelector('#cartArea'); 

var prods = document.querySelectorAll('.product');
for(var i = 0; i < prods.length; i++)
{
  prods[i].setAttribute('draggable', 'true');  // optionnel avec des images
  prods[i].addEventListener('dragstart', function(evnt) {
  this.className = 'itemchoosen';
  evnt.dataTransfer.effectAllowed = 'copy';
  evnt.dataTransfer.setData('text', this.id);
  return false;
  }, false);
}

cartArea.addEventListener('dragover', function(evnt) {
   if (evnt.preventDefault) evnt.preventDefault();
   evnt.dataTransfer.dropEffect = 'copy';
   return false;
}, false);
   
cartArea.addEventListener('dragenter', function(evnt) {
    return false;
}, false);

cartArea.addEventListener('dragleave', function(evnt) {
   return false;
}, false);

cartArea.addEventListener('drop', function(evnt) {
  if (evnt.stopPropagation) evnt.stopPropagation();

  var id = evnt.dataTransfer.getData('text');
  var theitem = document.getElementById(id); 
  // theitem.parentNode.removeChild(theitem);   // une option non retenue ici
  theitem.className='itemblurred';
  var y  = document.createElement('img');
  y.src = theitem.src;
  cartArea.appendChild(y);
  evnt.preventDefault(); // pour Firefox
  return false;
}, false);
</script>

Сведения о коде

Список HTML-объектов продуктов будет получен с помощью метода querySelectorAll. Это один из вариантов. Затем к каждому тегу, представляющему продукт, в качестве демонстрации добавляется свойство dragggable (это работает без, потому что вы перемещаете изображения). Затем с каждым тегом связывается событие dragstart и функция, отвечающая на это событие.
В нашем примере при инициировании перемещения по странице изображение продукта принимает красную рамку.
Содержимое для передачи определяется dataTransfer.setData. Он имеет тип текста и идентификатор тега, представляющего продукт. 

var prods = document.querySelectorAll('.product');
for(var i = 0; i < prods.length; i++)
{
  prods[i].setAttribute('draggable', 'true');  // optionnel avec des images
  prods[i].addEventListener('dragstart', function(evnt) {
  this.className = 'itemchoosen';
  evnt.dataTransfer.effectAllowed = 'copy';
  evnt.dataTransfer.setData('text', this.id);
  return false;
  }, false);
}

Мы связываем событие dragEnter и dragLeave с тегом, в котором мы хотим удалить объекты. В нашем примере лечение не добавляется.

Мы также связываем dragOver. Это возможность назначить эффект. 

cartArea.addEventListener('dragover', function(evnt) {
   if (evnt.preventDefault) evnt.preventDefault();
   evnt.dataTransfer.dropEffect = 'copy';
   return false;
}, false);

И, наконец, добавляется событие drop, которое позволяет назначить обработку, которую нужно выполнить, когда объект помещен в корзину .

cartArea.addEventListener('drop', function(evnt) {
  if (evnt.stopPropagation) evnt.stopPropagation();
  var id = evnt.dataTransfer.getData('text');
  var theitem = document.getElementById(id); 
  // theitem.parentNode.removeChild(theitem);
  theitem.className='itemblurred';
  var y  = document.createElement('img');
  y.src = theitem.src;
  cartArea.appendChild(y);
  evnt.preventDefault(); // for Firefox
  return false;
}, false);

Это самая сложная функция (в нашем примере) и самая важная, поэтому она заслуживает детализации.

  1. Вызов stopPropagation не запускает события, которые могут возникнуть из-за того, что мы изменяем на странице.
  2. Извлекается содержимое dataTransfer с идентификатором продукта.
  3. Это позволяет поместить соответствующий HTML-элемент в переменную theitem.
    4. На
  4. этом этапе объект можно удалить в хранилище с помощью метода DOM removeChild. Это было бы хорошо для некоторых процедур, когда речь идет о перемещении объектов на страницу, но не для нашего примера, поэтому я добавил эту инструкцию в качестве комментария.
  5. Для вставки изображения в корзину создается тег изображения, в качестве источника назначается тег перемещенного объекта и добавляется тег как потомок контейнера cartArea.
  6. Выполнение событий по умолчанию отменяется с помощью preventDefault. Это нужно для Firefox.

Это лечение - демонстрация. Ты можешь вернуться к структуре кода и связать различную обработку с событиями, в зависимости от того, какое приложение должно быть реализовано. В случае интернет-магазина предметы, добавленные в корзину, не удаляются из первоначального списка, поскольку в корзину можно добавить несколько. В других случаях перемещение является материальным, объект снимают в одной точке, чтобы поместить в другую .

CSS-код также специфичен для нашего примера и отвечает на выбор. Это видно из источника на демонстрационной странице.

Эта демонстрационная страница предоставляет более простой доступ к исходному коду JavaScript и CSS. Его использование абсолютно свободно (за исключением учебника в сети).

Ссылки