В фейсбуке  В гугле  В твиттере  В контакте  В яндоксе
         

Каталог статей

Главная » Статьи » Дизайн

Использование drag and drop в html 5


Использование drag and drop в html 5

Конечно, возможность Drag and Drop уже давно была реализована средствами разных JavaScript API, однако в html 5 реализация этой функции выполнена гораздо проще и не требует никаких дополнительных библиотек.

Реализация Drag and Drop в HTML 5 основана на разработках Microsoft и поддерживается в Internet Explorer с 5й версии! На данный момент эта функция так же работает в современных браузерах Firefox, Opera, Safari и Google Chrome.

В этой статье мы попытаемся рассказать Вам как нужно правильно использовать Drag and Drop в html 5.

Введение

Для осуществления функций DnD, вам понадобятся следующие элементы:

  • Объект который будет перетаскиваться
  • Объект, который принимает перетаскиваемый объект
  • Обработчик JavaScript события, которое будет вызываться когда перетаскиваемый объект перемещается на принимаемый объект

Элементы img и a (в случае если указан атрибут href) по умолчанию можно перетаскивать. Если Вам требуется сделать перетаскиваемым любой другой элемент, в нем нужно указать атрибут draggable в true.

Давайте рассмотрим простой пример:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8 />
<title>Пример Drag and Drop в HTML 5</title>
<style>

#dropTarget {
 width: 530px;
 height: 200px;
 border: 3px dotted black;
 }

</style>
</head>
<body>
 <img src="http://html5blog.ru/news/images/HTML5_3D_Effects_64.png" alt="HTML5 3D Effects" />
 <img src="http://html5blog.ru/news/images/HTML5_Connectivity_64.png" alt="HTML5 Connectivity" />
 <img src="http://html5blog.ru/news/images/HTML5_Device_Access_64.png" alt="HTML5 Device Access" />
 <img src="http://html5blog.ru/news/images/HTML5_Multimedia_64.png" alt="HTML5 Multimedia" />
 <img src="http://html5blog.ru/news/images/HTML5_Offline_Storage_64.png" alt="HTML5 Offline Storage" />
 <img src="http://html5blog.ru/news/images/HTML5_Performance_64.png" alt="HTML5 Performance" />
 <img src="http://html5blog.ru/news/images/HTML5_Semantics_64.png" alt="HTML5 Semantics" />
 <img src="http://html5blog.ru/news/images/HTML5_Styling_64.png" alt="HTML5 Styling" />
 <div id="dropTarget"></div>
</body>
</html>

В данном примере Вы можете перетаскивать объекты, однако они не могут быть приняты в divе с id=dropTarget. Чтобы исправить эту ситуацию, мы должны выполнить два условия:

  • Сказать браузеру что перетаскиваемый объект может быть принят принимаемым объектом.
  • Обработать событие помещения перетаскиваемого элемента в принимаемый.

Чтобы выполнить первый пункт, нам нужно обработать событие dragover и dragenter. Если бы не Internet Explorer, обрабатывать пришлось бы только dragover. Вот простой пример кода:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8 />
<title>Пример Drag and Drop в HTML 5</title>
<style>

#dropTarget {
 width: 530px;
 height: 200px;
 border: 3px dotted black;
 }

</style>
<script>

function onDrop(event){
 if (event.preventDefault) {
  event.preventDefault();
  }
 alert('Получено изображение');
 return false;
 }

function cancel(event){
 if (event.preventDefault){
  event.preventDefault();
  }
 return false;
 }

</script>
</head>
<body>
 <img src="http://html5blog.ru/news/images/HTML5_3D_Effects_64.png" alt="HTML5 3D Effects" />
...
 <img src="http://html5blog.ru/news/images/HTML5_Styling_64.png" alt="HTML5 Styling" />
 <div id="dropTarget" ondrop="onDrop(event)" ondragenter="cancel(event)" ondragover="cancel(event)" ></div>
</body>
</html>

Давайте разберем некоторые моменты в предыдущем примере. Во-первых, конструкция в обработчиках событий ondragenter и ondragover говорит браузеру, что объект, над которым перетаскивается перетаскиваемый объект готов принять его. Чтобы это работало во всех браузерах, нужно оставить конструкцию так как она есть сейчас. (Т.е. в конце обязательно должно быть написано return false). Во-вторых, в обработчике события ondrop мы говорим браузеру что перетаскиваемый объект принят.

Передача данных

Давайте теперь рассмотрим каким образом передать какие-либо данные из перетаскиваемого объекта в принимающий. Для этого нам нужно обработать еще одно событие - ondragstart. Оно вызывается в перетаскиваемом объекте в тот момент, когда пользователь начинает перетаскивание элемента.

<img src="http://html5blog.ru/news/images/HTML5_3D_Effects_64.png" alt="HTML5 3D Effects" ondragstart="onDrag(this, event)" />

Обработчик события будет выглядеть примерно так:

function onDrag(target, event){
 event.dataTransfer.setData('image_name', target.alt);
 event.dataTransfer.setData('draggable_id', target.id);
 }

Здесь мы добавляем в переменную event данные об альтернативном тексте картинки и о её id.

Чтобы считать эти данные, в обработчике события ondrop достаточно написать вот такую конструкцию:

alert(event.dataTransfer.getData('image_name'));

Если Вы всё сделали верно, то теперь когда перетаскиваемый объект попадает на получаемый объект то высвечивается окошко с альтернативным текстом картинки.



Добавление пиктограммы перетаскивания

В HTML 5 есть возможность изменить пиктограмму, которая появляется при перетаскивании объекта. Это делается с помощью функции setDragImage(element, x, y). Сначала нам нужно создать сам элемент img:

var dragIcon = document.createElement('img');
dragIcon.src = 'http://twivatar.org/twitter/mini';

После этого в обработчике события ondragstart написать вот такой код:

event.dataTransfer.setDragImage(dragIcon, -10, -10);

Если все сделано верно, то при перетаскивании объекта над ним будет появляться пиктограмма твиттера.

Мы разобрали простейшие принципы работы с Drag and Drop в HTML 5. Надеемся что эта статья принесет кому-то пользу.

Категория: Дизайн | Добавил: wweebb (26.03.2013)
Просмотров: 901 | Рейтинг: 0.0/0
Восприятие дизайна
Успех во многом зависит от восприятия запоминающегося дизайном сайта, посетителями. Я считаю, что человеческий мозг — это площадка для ведения конкурентной борьбы. “Не нужно забывать, что сознание избирательно относится к поступающей информации: легко воспринимает уже знакомые факты и отбрасывает то, что не соотносится с его предыдущими знаниями и опытом.” Людям сложно запомнить 10 заповедей. Что уж говорить об интернет сайтах, если они занимают в сознании не первое и не второе место. У каждого посетителя существует внутренний рейтинг сайтов каждого дизайна по своему. Я этот рейтинг называю “визуальной лестницей”. Подниматься по такой “лестнице” сайту очень сложно, особенно если не используется стратегия позиционирования. Позиционировать продукт необходимо, отталкиваясь от информации о конкурирующих сайтов, знакомых потребителю.
Стратегия сайта
Человеческое сознание с трудом воспринимает сложные и запутанные идеи. Приведем пример о компании BMW. Переработав идею конкурента — компании Mercedes, которая заявляла о комфортабельности своих машин, BMW сообщила, что ее авто больше подходят для езды, чем для сидения. Тем самым была дискредитирована идея Mercedes. Это один из примеров изменения восприятия потребителей. Частная студия вебмастера «WebMasterSeo» проанализировала работу своих конкурентов и выявила у них определенные слабые места, такие как высокая цена на сайт и Хостинг от uCoz, большие сроки изготовления сайта. Поэтому при разработке своих сайтов Я отказался от всего, что могло бы усложнить разработку сайта. К тому же я смог снизить стоимость сайта и добавил дополнительные модули в базовый пакет. В результате, заказчик получает необходимые услуги и остается довольным, что сделало меня лидером по созданию дешевых сайтов за короткие сроки.
Макросреда компании
Макросреда компании – факторы наиболее общего воздействия, оказывающие влияние на каждую организацию, ведущую маркетинговую деятельность. Данные факторы могут открывать для кампании новые возможности или же стать источником серьезных угроз, на них практически невозможно воздействовать, но их воздействие необходимо учитывать и предугадывать. Макросреда большинства компаний в настоящее время может рассматриваться в составе следующих основных компонентов: экономическая среда, политико-правовая среда, культурная и демографическая среда.


 
доступный сайт 
  Быстро и недорого создам сайт.
  Сайт визитка за один день.
 

доступный сайт
  Доступный сайт для бизнеса.
  Сайт визитка за 10 000 руб.
доступный сайт
  Оптимальное продвижение сайта.
  Вывод в топ Яндекса от трех недель
 



    Торговую марку "WebMasterSeo" представляет ООО "WebMaster Design"

    Студия WebMasterSeo - Частная студия веб мастера (Россия, Москва)
    Создание сайтов. Разработка сайтов. Изготовление веб сайтов.
    Заказать сайт онлайн. Веб-студия web-ms, Москва, Балашиха, Реутов
    Железнодорожный, Кучино, Мытищи, Щелково, Красноармейск.




Адрес: г. Москва, ул. 9-Парковая, д.59. корп.1

Тел.: 8 (926) 222-22-22, Сайт: web-ms.ru
E-Mail: info@web-ms.ru
Служба поддержки: info@web-ms.ru
Онлайн-поддержка: Отвечу сразу


8 (926) 222-22-22