Не существует никакого специального метода, который позволил бы проверить, допускается перетаскивание данных из источника или нет. На информацию, возвращаемую методом 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), но в любом случае каждый раз это уникальный процесс. Другими словами, всегда необходимо настраивать проверку самостоятельно.
Добавить комментарий