Технология "перетаскивания".

  Технология "перетаскивания" позволяет перемещать контент или данные документа Web-страницы в пределах окна браузера, или данные с(на) рабочего стола на(из) окно браузера, пользователем с помощью мышки, и, при этом, создавать различные визуальные эффекты.

  Следует иметь в виду, что большинство браузеров, и без применения специальных API, поддерживают перетаскивание некоторых объектов (например таких как фрагменты текста, изображения и элементы привязок).

  Интерфейс DataTransfer и соответствующие события DragEvent позволяют разрабатывать оригинальный функционал "перетаскивания" практически для любых объектов контента и данных - в том числе изображений, файлов и элементов тегов.

  Для того чтобы элемент тега или его содержимое стали "перетаскиваемыми" этому элементу необходимо задать атрибут DRAGGABLE=true.

  Применять интерфейс DataTransfer и механизм событий DragEvent можно и для "перетаскивания" выделенного на Web-странице контента.
  Это можно сделать воспользовавшись функционалом технологии Selection в обработчике события dragstart.
  А, впрочем, при наличии принимающего элемента, и используя метод preventDefault, выделенный контент можно перетаскивать и без обработчика события dragstart.

  Применять интерфейс DataTransfer и механизм событий DragEvent можно для "перетаскивания" объектов с рабочего стола и из папок устройства пользователя в целевые объекты Web-страницы.
  Для этого у объекта DataTransfer имеется свойство files, значение которого, вместе с функционалом технологии File можно использовать в обработчике события drop.

  Все обработчики событий DragEvent, наряду с организацией самого процесса "перетаскивания", могут создавать различные визуальные эффекты, связанные с этим процессом.
  Использование интерфейса DataTransfer и событий DragEvent, по двум причинам, имеет важную особенность.
  Во-первых, все события DragEvent, из за поддерживаемого браузером собственного функционала "перетаскивания", связаны с различными действиями браузера по умолчанию.
  Во-вторых, все события DragEvent связаны с теми или иными действиями мышкой, вследствие чего параллельно могут также возникнуть события, на которые имеются стандартные действия браузера (например нажатие клавиши мышки на элементе привязки).

  Поэтому в обработчиках событий DragEvent обычно всегда вызывают метод preventDefault (как правило, в обработчике события dragover, но можно и на любом событии DragEvent).
  DataTransfer
  DataTransfer - Является интерфейсом к функционалу "перетаскивания".
  Экземпляр доступен:

  1. Через свойство dataTransfer объекта DragEvent
  Свойства.
  dropEffect - Задаёт тип фантомного значка, который отобразится на Web-странице вместе с курсором мышки во время событий dragenter и dragover.
  Значение имеет строковый формат.
  Тип фантомного значка может быть установлен в обработчике событий dragenter и dragover, и должен соответствовать разрешенному типу установленному свойством effectAllowed.
  Можно установить и другой тип, но он только введёт в заблуждение пользователя.

  Если тип фантомного значка установлен в обработчике событий dragstart и(или) dragleave, то свойство dropEffect всё равно будет иметь значение none.

  Если тип фантомного значка установлен в обработчике событий dragend и(или) drop, то свойство dropEffect всё равно будет иметь значение заданное в обработчике последнего события dragenter или dragover.

Формат записи в коде скрипта:

  • Экземпляр объекта DataTransfer.dropEffect[= "copy" | "link" | "move" | "none"]

Значения формата записи:

  effectAllowed - Содержит значение определяющее разрешенные типы операций "перетаскивания".
  Значение имеет строковый формат.
  Разрешённые типы операций "перетаскивания" могут быть установлены только в момент события dragstart.

Формат записи в коде скрипта:

  • Экземпляр объекта DataTransfer.effectAllowed[= "all" | "copy" | "copyLink" | "copyMove" | "link" | "linkMove" | "move"| "none" | "uninitialized"]

Значения формата записи:

  • Экземпляр объекта DataTransfer - Любой операнд значения со значением экземпляра объекта DataTransfer.
  • . - Оператор доступа к свойству объекта.
  • effectAllowed - Ключевое слово.
    • all - Разрешаются все операции.
    • copy - Разрешается копирование исходного объекта в место назначения.
    • copyLink - Разрешается копирование исходного объекта в место назначения, либо создание ссылки на него.
    • copyMove - Разрешается копирование или перемещение исходного объекта в место назначения.
    • link - Разрешается копирование ссылки на исходный объект в место назначения.
    • linkMove - Разрешается перемещение исходного объекта в место назначения, либо создание ссылки на него.
    • move - Разрешается перемещение исходного объекта в место назначения.
    • none - Не разрешаются ни какие операции.
    • uninitialized - Значение не установлено (умолчание). Эквивалентно all.
      Операция копирования имеет приоритет над операцией перемещения.
      Операция перемещения имеет приоритет над операцией создания ссылки.
  files - Содержит ссылку на интерфейс FileList к списку локальных файлов, которые "перетаскиванются" в целевой объект.
  Если ни какие файлы не "перетаскиваются" в текущий момент, то свойство files содержит значение undefined.
  Cвойство files, как правило, используется для "перетаскивания" из папок или с рабочего стола устройства пользователя на Web-страницу, и наоборот.

Формат записи в коде скрипта:

  • Экземпляр объекта DataTransfer.files

Значения формата записи:

  types - Содержит список, перечисленных через запятую, всех форматов данных исходного объекта.
  Значение имеет строковый формат.
  Если "перетаскиваются" файлы, то свойство types содержит значение "Files".

Формат записи в коде скрипта:

  • Экземпляр объекта DataTransfer.types

Значения формата записи:

  Методы.
  addElement - Добавляет элемент тега в список элементов, которые предназначены для создания визуальных эффектов при "перетаскивании".
  Возвращает ссылку на соответствующий интерфейс NodeList.
  Метод addElement вызывается в обработчике события dragstart, и позволяет задать элементы, которые разработчик может использовать для, например, динамического стилевого оформления или вывода сообщений, в процессе "перетаскивания".
  Метод addElement плохо поддерживается браузерами, да он, в принципе, и не нужен, поскольку у разработчика и так есть доступ к любому элементу тега.

Формат записи в коде скрипта:

  • Экземпляр объекта DataTransfer.addElement([Элемент])

Значения формата записи:

  clearData - Удаляет все данные полученные методом setData.
  Возвращает значение undefined.
  Метод clearData можно использовать в обработчиках всех событий DragEvent.

Формат записи в коде скрипта:

  • Экземпляр объекта DataTransfer.clearData([Тип])

Значения формата записи:

  getData - Возвращает данные заданного типа полученные методом setData.
  Возвращаемое значение имеет строковый формат.
  Метод getData можно использовать в обработчиках всех событий DragEvent, однако его обычно его вызывают в обработчике события drop.

Формат записи в коде скрипта:

  • Экземпляр объекта DataTransfer.getData(Тип)

Значения формата записи:

  setData - Заносит данные заданного типа в буферную память.
  Возвращает значение undefined.
  Обычно метод setData вызывают в обработчике события dragstart.

Формат записи в коде скрипта:

  • Экземпляр объекта DataTransfer.setData(Тип, Данные)

Значения формата записи:

  setDragImage - Задаёт изображение, заменяющее фантомный значок, используемый при "перетаскивании".
  Возвращает значение undefined.
  Метод setDragImage вызывыается в обработчике события dragstart.
  Метод setDragImage плохо поддерживается браузерами.

Формат записи в коде скрипта:

  • Экземпляр объекта DataTransfer.setDragImage(Элемент, X, Y)

Значения формата записи:


Пример "перетаскивания" рисунка с рабочего стола или из папок компьютера.
Перетащите сюда рисунок с Вашего компьютера
Код:
<IMG id="IMGdemo"
  STYLE="width: 200px; height: 200px; background-color: silver; text-align: center;"
  ALT="Перетащите сюда рисунок с Вашего компьютера">
<SCRIPT>
  var Imd = document.getElementById("IMGdemo");
  var FR = new FileReader();
  var SX = function(W)
    {
      W.preventDefault();
      var files = W.dataTransfer.files;
      FR.readAsDataURL(files[0]);
    };
  var SY = function(X) { Imd.src = this.result; };
  Imd.addEventListener("drop", SX, false);
  FR.onload = SY;
  document.addEventListener("dragover", function(W) {W.preventDefault(); });

</SCRIPT>

Пример "перетаскивания" выделенного контента.
Выделите какой-нибудь контент в текущем документе.
  Если выделить контент в левой колонке (в меню), то обработчик события dragstart не будет вызван, поскольку он назначен для "дочернего" документа. Однако контент всё равно можно "перетащить" потому, что браузер выполнит стандартное действие на событие dragstart, которое не отменено в "родительском" документе.
Код:
<TEXTAREA ID="POSTW" STYLE="width: 300px; height: 100px; background-color: silver; overflow: auto;"
</TEXTAREA>
<SCRIPT>
  var Tow = document.getElementById("POSTW");
  var TX = function(W)
    {
      Tow.style.color = "red";
      Tow.style.backgroundColor = "yellow";
      Tow.value = "Перетащите сюда выделенный текст";
      W.dataTransfer.setData("Text", document.selection.getRangeAt(0).toString());
    };
  var TY = function(W)
    {
      W.preventDefault();
      Tow.style.color = "";
      Tow.style.backgroundColor = "silver";
      var dat = W.dataTransfer.getData("Text");
      W.target.value = dat;
    };
  document.addEventListener("dragstart", TX);
  Tow.addEventListener("drop", TY);
  document.addEventListener("dragover", function(W) {W.preventDefault(); });

</SCRIPT>

Пример перетаскивания элемента (Chrome).
"Перетащите" репку




Репка


Сюда

Код:
<div id="dropdivO"
  STYLE="width: 100px; height: 100px; background-color: silver; color: red; font-size: x-small; text-align: center; ">
     <BR><BR>
    <div draggable="true" id="dragp"
      STYLE="width: 50px; height: 50px; background-color: beige;
      font-size: medium; color: black; margin-left: 25px; margin-bottom: 10px;">
        <BR>Репка
    </div>
</div><BR><BR>
<div id="dropdivN"
  STYLE="width: 100px; height: 100px; background-color: silver; color: red; font-size: x-small; text-align: center; ">
    Сюда<BR><BR>
</div>
<SCRIPT>
  var Dragp = document.getElementById("dragp");
  var DropdivN = document.getElementById("dropdivN");
  var DropdivO = document.getElementById("dropdivO");
  var UX = function(W)
    {
      W.dataTransfer.setData("Element", W.target.id);
      W.target.style.opacity = "0.4";
    };
  var UY = function(W)
    {
      W.preventDefault();
      if (W.target.id = "dropdivN") {DropdivO.firstChild.data = "Сюда";};
      if (W.target.id = "dropdivO") {DropdivN.firstChild.data = "Сюда";};
      var El = event.dataTransfer.getData("Element");
      W.target.appendChild(document.getElementById(El));
      W.target.firstChild.data = "";
    };
  Dragp.addEventListener("dragstart", UX);
  dropdivN.addEventListener("drop", UY);
  dropdivO.addEventListener("drop", UY);
  document.addEventListener("dragover", function(W) {W.preventDefault(); });

</SCRIPT>