HTML5 за 10 минут

Завершение операций опускания


Когда перетаскиваемый элемент <div> опускается, в нем наступает событие ondragend, которое ранее было связано с функцией JavaScript под названием end(). В этом задании вам предстоит ввести код функции end() с целью очистить данные, хранящиеся в объекте dataTransfer, т.е. идентификатор перетаскиваемого элемента, как только операция опускания будет завершена.

1.   Откройте HTML-документ из файла draganddrop.html в избранном вами редакторе текста, например в Windows WordPad.

2.   Введите приведенный ниже код функции end() в элементе <script>, завершив его соответствующим дескриптором.

function end(e)

{

е.dataTransfer.clearData("Data"); return true

}

</script>

3.   Сохраните внесенные изменения в файле draganddrop.html. Непременно сделайте это в текстовом формате. По умолчанию в текстовом редакторе WordPad выбирается расширенный текстовый формат RTF, непригодный для браузеров.

На этом создание примера HTML-документа draganddrop. html завершается. Теперь операции перетаскивания элементов должны выполняться в любом браузере, где они поддерживаются, как показано на 3.4.

Полный исходный код примера HTML-документа draganddrop.html

Ниже для справки приводится полностью исходный код рассмотренного в этой главе примера HTML-документа draganddrop. html.

<!DOCTYPE HTML>

<html>

<head>

<title>

Пример реализации перетаскивания </title>

<style type="text/css">

♦targetl, #target2, #target3 {

float:left; width:250px; height:250px; padding:10px; margin:lOpx;

}

♦draggablel, #draggable2, Idraggable3 {

width:75px; height:7Opx; padding:5px; margin:5px;

}

♦targetl {background-color: cyan;}

♦target2 {background-color: cyan;}

♦target3 {background-color: cyan;}

fdraggablel {background-color: orange;} #draggable2 {background-color: orange;} ♦draggable3 {background-color: orange;} </style>

<script type="text/javascript"> function start(e)

{

e.dataTransfer.effectAllowed=move; e.dataTrans fer.setData("Data"f e.target.getAttribute(id)); e.dataTransfer.setDragImage(e.target, 0, 0); return true;

}

function enter(e)

{

return true;

}

function over(e)

{

var iddraggable = e.dataTransfer.getData(“Data");

if(id ==targetl) return false;

if((id ==target2)

&& iddraggable == draggable3) return false;

else if(id ==target3

&& (iddraggable == draggablel || iddraggable ==draggable2)) return false;

else

return true;

}

function drop(e)

{

var iddraggable = e.dataTransfer.getData("Data"); e.target.appendChild

(document.getElementById(iddraggable)); e.stopPropagation(); return false;

}

function end(e)

{

e.dataTransfer.clearData("Data"); return true

}

</script>

</head>

<body>

<Ь1>Пример реализации перетаскивания</Ь1>

<div id®"target1" ondragenter="return enter(event)" ondragover=" return over(event)" ondrop="return drop(event)">

<div id="draggablel" draggable="true" ondragstart="return start(event)" ondragend="return end(event)">1 </div>

<div id="draggable2" draggable="true" ondragstart="return start(event)" ondragend="return end(event)">2 </div>

<div id="draggable3" draggable="true" ondragstart="return start(event)" ondragend="return end(event)">3 </div>

</div>

<div id="target2" ondragenter="return enter(event)" ondragover="return over(event)" ondrop="return drop(event)">

</div>

<div id="target3" ondragenter="return enter(event)" ondragover="return over(event)" ondrop="return drop(event)">

</div>

</body>

</html>

Комментарии закрыты