HTML5 за 10 минут

Реализация начала операции перетаскивания


Когда пользователь начинает перетаскивать в рассматриваемом здесь примере перетаскиваемый элемент <div>, в этом элементе

наступает событие ondragstart, которое ранее было связано с функцией JavaScript под названием start ().

В этом задании вам предстоит написать функцию start () с целью реализовать начало операции перетаскивания. Данный процесс можно разделить на три стадии: задание разрешенной операции перетаскивания, чтобы пользователь мог переместить нужный ему перетаскиваемый элемент <div>; сохранение идентификатора перетаскиваемого элемента, чтобы переместить его после опускания на целевом элементе; а также задание изображения, используемого при перетаскивании по веб-странице.

Для того чтобы реализовать все эти стадии, выполните следующие действия.

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

2.   Введите приведенный ниже код в элементе <head>, начиная с нового элемента <script>, где и должна быть написана функция start().

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

{

}

3.   Введите выделенный ниже полужирным код в теле функции start (), чтобы указать на то, что элемент <div>, который пользователь пытается перетащить, действительно можно перетаскивать. С этой целью задается значение "move" свойства dataTransfer.effectAllowed событийного объекта, передаваемого функции start ().

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

{

e. dataTransf er. ef f ectAllowedmove;

}

4.   Введите выделенный ниже полужирным код в теле функции start (), чтобы сохранить идентификатор перетаскиваемого

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

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

{

e.dataTransf er.effectAllowed-move; e.dataTransfer.setData("Data", e.target.getAttribute(id));

}

5.   Введите выделенный ниже полужирным код в теле функции start (), чтобы задать изображение, используемое при перемещении перетаскиваемого элемента <div>, со смещением (0, 0).

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

{

e. dataTransf er. ef fee tAllowed=move; e.dataTransfer.setData("Data", e.target.getAttribute(id)); e.dataTransfer.setDragImage(e.target, 0, 0); return true;

}

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