Выбор допустимого источника

Выбор допустимого источника.

Не существует никакого специального метода, который позволил бы проверить, допускается перетаскивание данных из источника или нет. На информацию, возвращаемую методом getData(), положиться нельзя, так как, даже если мы получим данные указанного в соответствующем атрибуте типа, может оказаться так, что их передал другой источник, просто тип случайно совпал. У объекта dataTransfer есть свойство под названием types. Оно возвращает массив со списком типов, определенных в событии dragstart, однако тоже не помогает решить задачу валидации. По этой причине техники выбора и валидации данных, передаваемых в операции перетаскивания, могут в значительной степени варьироваться. Создавайте настолько простые или сложные процедуры проверки, насколько необходимо в конкретной ситуации.

Листинг 8.5. Новый шаблон с дополнительными источниками

<!DOCTYPE html>

<html lang="ru">

<head>

<title>Перетаскивание</title>

<link rel="stylesheet" href="dragdrop. css">

<script src="dragdrop. js"></script>

</head>

<body>

<section id="dropbox">

Перетаскивайте изображения сюда </section>

<section id="picturesbox">

<img id="image1" src="http://www.minkbooks.com/content/monster1.gif"> <img id="image2" src="http://www.minkbooks.com/content/monster2.gif"> <img id="image3" src="http://www.minkbooks.com/content/monster3.gif"> <img id="image4" src="http://www.minkbooks.com/content/monster4.gif"> </section>

</body>

</html>

Используя новый HTML-документ из листинга 8.5, мы будем фильтровать источники, проверяя атрибут id каждого изображения. Следующий JavaScript-код подсказывает, какое изображение можно отпустить на зоне приема, а какое нельзя.

Листинг 8.6. Отправка атрибута id

Function initiate(){

Var images=document. querySelectorAll(‘#picturesbox > img’); for(var i=0; i<images. length; i++){

Images[i].addEventListener(‘dragstart’, dragged, false);

}

Drop=document. getElementById(‘dropbox’); drop. addEventListener(‘dragenter’, function(e){ e. preventDefault(); }, false); drop. addEventListener(‘dragover’, function(e){ e. preventDefault(); }, false); drop. addEventListener(‘drop’, dropped, false);

}

Function dragged(e){ elem=e. target;

E. dataTransfer. setData(‘Text’, elem. getAttribute(‘id’));

}

Function dropped(e){ e. preventDefault();

Var id=e. dataTransfer. getData(‘Text’); if(id!="image4"){

Var src=document. getElementById(id).src; drop. innerHTML='<img src="’+src+’">’;

}else{

Drop. innerHTML=’He разрешается’;

}

}

Window. addEventListener(‘load’, initiate, false);

В листинге 8.6 поменялось не так уж много по сравнению с предыдущими примерами кода. Мы используем метод querySelectorAll() для добавления прослушивателя события dragstart к каждому изображению внутри элемента picturesbox, отправляем атрибут id посредством метода setData() каждый раз, когда пользователь начинает перетаскивать любое из изображений, и проверяем значение этого атрибута id в функции dropped(), для того чтобы не допускать перетаскивания изображения с id="image4" (если пользователь отпустит это изображение над зоной приема, вместо картинки там появится надпись «Не разрешается»).

Это очень простой фильтр. В качестве альтернативных примеров вы могли бы применить метод querySelectorAll() в функции dropped() для проверки того, что полученное изображение действительно принадлежит элементу picturesbox, или поработать со свойствами объекта dataTransfer (такими, как types и files), но в любом случае каждый раз это уникальный процесс. Другими словами, всегда необходимо настраивать проверку самостоятельно.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *