HTML5 за 10 минут

Создание перетаскиваемых элементов


Введите выделенный ниже полужирным код для создания трех перетаскиваемых элементов <div> в качестве потомков первого целевого элемента. Обратите внимание на то, что в этом коде задается логическое значение true атрибута draggable каж-

дого перетаскиваемого элемента <div>, а также устанавливается связь событий, поддерживаемых в этих элементах, с функциями JavaScript, которые будут написаны в дальнейшем.

<!DOCTYPE HTML>

<html>

<head>

<title>

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

</head>

<body>

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

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

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

<div id=,draggable2M 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>

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

Итак, начало рассматриваемому здесь примеру положено. Вы создали три целевых элемента и три перетаскиваемых элемента. Но все они пока еще невидимы, и поэтому в следующем задании вам предстоит заняться их стилевым оформлением.

Стилевое оформление перетаскиваемых и целевых элементов

В этом задании необходимо сделать видимыми перетаскиваемые элементы <div> и соответствующие целевые элементы для перетаскивания. В частности, целевые элементы должны быть оформлены голубым цветом, а перетаскиваемые — оранжевым.

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

2.   Введите выделенный ниже полужирным код для стилевого оформления перетаскиваемых элементов <div> и соответствующих целевых элементов, а также для задания их размеров.

<1DOCTYPE HTML>

<html>

<head>

<title>

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

<style type="text/css">

targetl, #target2, Itarget3 {

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

}

♦draggablel, #draggable2, Idraggable3 {

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

}

♦target1 {background-color: cyan;} ttarget2 {background-color: cyan;} ttarget3 {background-color: cyan;}

tdraggable1 {background-color: orange;} tdraggable2 {background-color: orange;} Idraggable3 {background-color: orange;} </style>

</head>

<body>

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

<div id="targetl" 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>

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

Теперь перетаскиваемые и целевые элементы для их перетаскивания должны быть видны в окне браузера.

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