HTML5. Основы клиентской разработки

Drag and Drop

Разбить на страницы
Показывать лекцию целиком

Целью практического занятия является формирования навыков работы с методами и элементами разметки, позволяющими менять местоположение любых элементов страницы при помощи мыши, на основе событийного механизма и JavaScript API, определенных спецификацией HTML5.

Задание

Реализовать функцию перемещения элементов веб - страницы между группой контейнеров, в следующих вариантах:

  • все элементы могут свободно перемещаться между тремя контейнерами;
  • ряд элементов, относящихся к одному классу нельзя перенести в один из контейнеров;
  • элементы не могут быть возвращены в контейнер, в котором находились первоначально;
    •

    Ход работы

    В качестве примера, создадим два контейнера, в один из которых (источник) поместим три элемента, элементы можно будет свободно перемещать из контейнера - источника, в целевой контейнер и обратно.

    Для этого необходимо:

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

    Создание элементов страницы для перемещения

    Для того, чтобы можно было перемещать элемент в рамках страницы, достаточно просто добавить атрибут draggable = true. Создадим контейнеры для размещения элементов и элементы для последующего перемещения:

    <div id="source" class="conteiner" >
   <div id="firstDragElement" class="element" draggable="true">Text 1</div>
   <div id="secondDragElement" class="element" draggable="true">Text 2</div>
   <div id="thirdDragElement" class="element" draggable="true">Text 3</div>
</div>

<div id="target" class="conteiner"></div>

    Стилизация элементов

    Для простоты восприятия примера, создадим следующие стили для элементов:

    .element {
border: 2px solid black; 
height: 50px; 
width: 50px; 
margin-left:20px; 
margin-bottom: 10px; 
text-align:center;
}
            
.conteiner {
border: 2px solid red; 
height: 200px; 
width: 100px; 
float:left; 
margin: 50px;
 }

    В результате, после привязки CSS к HTML - документу, получим следующее:

    (рис 20.1) Макет для реализации Drag and drop

    Создание JavaScript функции

    Перед тем, как писать функции - обработчики событий, кратко пробежимся по теоретическим аспектам.

    Отслеживать процесс Drag and drop позволяют следующие события:

  • dragstart;
  • drag;
  • dragenter;
  • dragleave;
  • dragover;
  • drop;
  • dragend.
    •

    События dragenter, dragover и dragleave можно использовать для того, чтобы сделать процесс переноса более наглядным. Например, можно добавить рамку тому элементу, над которым происходит перетаскивание.

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

    Объект DataTransfer (см. список материалов по теме) хранит данные отсылаемые в процессе перетаскивания. dataTransfer задается в событии dragset и используется в событии drop. Вызов e.dataTransfer.setData(format, data) устанавливает mimetype и данные нужные для перетаскивания.

    Свойство dataTransfer имеет функцию getData(format) для получения сохраненных данных.

    Свойство dataTransfer предоставляет возможность тонкой настройки отображения процесса переноса:

  • dataTransfer.effectAllowed. Эффект, поддерживаемый целевым элементом перетаскивания. Как правило, это значение задается обработчиком события dragstart. Может принимать следующие значения: none, copy, copyLink, copyMove, link, linkMove, move, all и uninitialized (см. список дополнительных материалов по теме).
  • dataTransfer.dropEffect. Эффект, выбранный пользователем или целевым элементом. Может принимать следующие значение: none, copy, link, move (см. список дополнительных материалов по теме).
  • dataTransfer.setDragImage(i, x, y). Вместо того чтобы использовать при перетаскивании полупрозрачную картинку по умолчанию (см. список дополнительных материалов по теме).
    •

    Теперь можно перейти к созданию самих функций:

    function dragStart(ev) 
      {
      ev.dataTransfer.effectAllowed='link';
      ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
      ev.dataTransfer.setDragImage(ev.target,0,0);
      return true;
      }

function dragEnter(ev) 
      {
      var idelt = ev.dataTransfer.getData("Text");
      return true;
      }

function dragOver(ev) 
      {
      var idelt = ev.dataTransfer.getData("Text");
      var id = ev.target.getAttribute('id');
      return false;
      }

function dragEnd(ev) 
      {
      ev.dataTransfer.clearData("Text");
      return true
      }

function dragDrop(ev) 
      {
      var idelt = ev.dataTransfer.getData("Text");
      ev.target.appendChild(document.getElementById(idelt));
      ev.stopPropagation();
      return false; 
      }

    Осталось только прописать вызов соответствующих функций при возникновении событий:

    <div id="source" class="conteiner" ondragenter="return dragEnter(event)" 
ondrop="return dragDrop(event)" ondragover="return dragOver(event)">
      <div id="firstDragElement" class="element" ondragstart="return dragStart(event)" 
ondragend="return dragEnd(event)" draggable="true">Text 1</div>
      <div id="secondDragElement" class="element" ondragstart="return dragStart(event)
" ondragend="return dragEnd(event)" draggable="true">Text 2</div>
      <div id="thirdDragElement" class="element" ondragstart="return dragStart(event)" 
ondragend="return dragEnd(event)" draggable="true">Text 3</div>
</div>
    
    <div id="target" class="conteiner" ondragenter="return dragEnter(event)" 
ondrop="return dragDrop(event)" ondragover="return dragOver(event)"></div>

    Открыв HTML - документ в браузере, можно убедиться в работоспособности, написанных нами функций (рис 20.2), (рис 20.3), (рис 20.4):

    (рис 20.2) Результат реализации drag and drop функции средствами HTML5 (рис 20.3) Реализации drag and drop функции средствами HTML5 (рис 20.4) Реализации drag and drop функции средствами HTML5

    Рассмотренный нами пример является схематичным и предназначен исключительно для ознакомления с основами drag and drop. Более детальные примеры можно найти по ссылкам ниже.

    Дополнительные материалы по теме

  • свойство
  • свойство
  • свойство
  • Примеры Drag and Drop HTML5
  • http://www.simplecoding.org/html5-zagruzka-fajlov-s-pomoshhyu-drag-drop.html
  • http://html5blog.ru/articles/ispolzovanie-drag-and-drop-v-html-5.php
    •
    Страницы:

    Целью практического занятия является формирования навыков работы с методами и элементами разметки, позволяющими менять местоположение любых элементов страницы при помощи мыши, на основе событийного механизма и JavaScript API, определенных спецификацией HTML5.

    Задание

    Реализовать функцию перемещения элементов веб - страницы между группой контейнеров, в следующих вариантах:

  • все элементы могут свободно перемещаться между тремя контейнерами;
  • ряд элементов, относящихся к одному классу нельзя перенести в один из контейнеров;
  • элементы не могут быть возвращены в контейнер, в котором находились первоначально;
    •

    Ход работы

    В качестве примера, создадим два контейнера, в один из которых (источник) поместим три элемента, элементы можно будет свободно перемещать из контейнера - источника, в целевой контейнер и обратно.

    Для этого необходимо:

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

    Создание элементов страницы для перемещения

    Для того, чтобы можно было перемещать элемент в рамках страницы, достаточно просто добавить атрибут draggable = true. Создадим контейнеры для размещения элементов и элементы для последующего перемещения:

    <div id="source" class="conteiner" >
   <div id="firstDragElement" class="element" draggable="true">Text 1</div>
   <div id="secondDragElement" class="element" draggable="true">Text 2</div>
   <div id="thirdDragElement" class="element" draggable="true">Text 3</div>
</div>

<div id="target" class="conteiner"></div>

    Стилизация элементов

    Для простоты восприятия примера, создадим следующие стили для элементов:

    .element {
border: 2px solid black; 
height: 50px; 
width: 50px; 
margin-left:20px; 
margin-bottom: 10px; 
text-align:center;
}
            
.conteiner {
border: 2px solid red; 
height: 200px; 
width: 100px; 
float:left; 
margin: 50px;
 }

    В результате, после привязки CSS к HTML - документу, получим следующее:

    (рис 20.1) Макет для реализации Drag and drop

    Создание JavaScript функции

    Перед тем, как писать функции - обработчики событий, кратко пробежимся по теоретическим аспектам.

    Отслеживать процесс Drag and drop позволяют следующие события:

  • dragstart;
  • drag;
  • dragenter;
  • dragleave;
  • dragover;
  • drop;
  • dragend.
    •

    События dragenter, dragover и dragleave можно использовать для того, чтобы сделать процесс переноса более наглядным. Например, можно добавить рамку тому элементу, над которым происходит перетаскивание.

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

    Объект DataTransfer (см. список материалов по теме) хранит данные отсылаемые в процессе перетаскивания. dataTransfer задается в событии dragset и используется в событии drop. Вызов e.dataTransfer.setData(format, data) устанавливает mimetype и данные нужные для перетаскивания.

    Свойство dataTransfer имеет функцию getData(format) для получения сохраненных данных.

    Свойство dataTransfer предоставляет возможность тонкой настройки отображения процесса переноса:

  • dataTransfer.effectAllowed. Эффект, поддерживаемый целевым элементом перетаскивания. Как правило, это значение задается обработчиком события dragstart. Может принимать следующие значения: none, copy, copyLink, copyMove, link, linkMove, move, all и uninitialized (см. список дополнительных материалов по теме).
  • dataTransfer.dropEffect. Эффект, выбранный пользователем или целевым элементом. Может принимать следующие значение: none, copy, link, move (см. список дополнительных материалов по теме).
  • dataTransfer.setDragImage(i, x, y). Вместо того чтобы использовать при перетаскивании полупрозрачную картинку по умолчанию (см. список дополнительных материалов по теме).
    •

    Теперь можно перейти к созданию самих функций:

    function dragStart(ev) 
      {
      ev.dataTransfer.effectAllowed='link';
      ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
      ev.dataTransfer.setDragImage(ev.target,0,0);
      return true;
      }

function dragEnter(ev) 
      {
      var idelt = ev.dataTransfer.getData("Text");
      return true;
      }

function dragOver(ev) 
      {
      var idelt = ev.dataTransfer.getData("Text");
      var id = ev.target.getAttribute('id');
      return false;
      }

function dragEnd(ev) 
      {
      ev.dataTransfer.clearData("Text");
      return true
      }

function dragDrop(ev) 
      {
      var idelt = ev.dataTransfer.getData("Text");
      ev.target.appendChild(document.getElementById(idelt));
      ev.stopPropagation();
      return false; 
      }

    Осталось только прописать вызов соответствующих функций при возникновении событий:

    <div id="source" class="conteiner" ondragenter="return dragEnter(event)" 
ondrop="return dragDrop(event)" ondragover="return dragOver(event)">
      <div id="firstDragElement" class="element" ondragstart="return dragStart(event)" 
ondragend="return dragEnd(event)" draggable="true">Text 1</div>
      <div id="secondDragElement" class="element" ondragstart="return dragStart(event)
" ondragend="return dragEnd(event)" draggable="true">Text 2</div>
      <div id="thirdDragElement" class="element" ondragstart="return dragStart(event)" 
ondragend="return dragEnd(event)" draggable="true">Text 3</div>
</div>
    
    <div id="target" class="conteiner" ondragenter="return dragEnter(event)" 
ondrop="return dragDrop(event)" ondragover="return dragOver(event)"></div>

    Открыв HTML - документ в браузере, можно убедиться в работоспособности, написанных нами функций (рис 20.2), (рис 20.3), (рис 20.4):

    (рис 20.2) Результат реализации drag and drop функции средствами HTML5 (рис 20.3) Реализации drag and drop функции средствами HTML5 (рис 20.4) Реализации drag and drop функции средствами HTML5

    Рассмотренный нами пример является схематичным и предназначен исключительно для ознакомления с основами drag and drop. Более детальные примеры можно найти по ссылкам ниже.

    Дополнительные материалы по теме

  • свойство
  • свойство
  • свойство
  • Примеры Drag and Drop HTML5
  • http://www.simplecoding.org/html5-zagruzka-fajlov-s-pomoshhyu-drag-drop.html
  • http://html5blog.ru/articles/ispolzovanie-drag-and-drop-v-html-5.php
    •
    Предыдущее занятие Следующее занятие
    Вернуться к учебному плану
    ^