События dragenter, dragleave и dragend

События dragenter, dragleave и dragend.

Пока что с событием dragenter мы ничего не делали — всего лишь отменили его, для того чтобы запретить поведение браузера по умолчанию. Точно так же не воспользовались возможностями событий dragleave и dragend. Однако это важные события, обеспечивающие обратную связь, благодаря чему мы можем давать пользователям подсказки относительно перемещения элементов по экрану.

Function initiate(){

Source1=document. getElementById(‘image’);

Sourcel. addEventListener(‘dragstart’, dragged, false); source1.addEventListener(‘dragend’, ending, false);

Drop=document. getElementById(‘dropbox’); drop. addEventListener(‘dragenter’, entering, false); drop. addEventListener(‘dragleave’, leaving, false);

Drop. addEventListener(‘dragover’, function(e){ e. preventDefault(); }, false); drop. addEventListener(‘drop’, dropped, false);

}

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

Drop. style. background=’rgba(0,150,0,.2)’;

}

Function leaving(e){ e. preventDefault(); drop. style. background=’#FFFFFF’;

}

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

Elem. style. visibility=’hidden’;

}

Function dragged(e){

Var code=’<img src="’+source1.getAttribute(‘src’)+’">’; e. dataTransfer. setData(‘Text’, code);

}

Function dropped(e){ e. preventDefault(); drop. style. background=’#FFFFFF’; drop. innerHTML=e. dataTransfer. getData(‘Text’);

}

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

Листинг 8.4. Управление процессом перетаскивания от и до JavaScript-код из листинга 8.4 заменяет собой код из листинга 8.3. В новом коде мы добавили две функции для зоны приема и одну — для источника. Функции entering() и leaving() меняют фоновый цвет зоны приема каждый раз, когда при перетаскивании элемента указатель мыши оказывается над ней или покидает ее (эти действия инициируют события dragenter и dragleave). Помимо этого прослушиватель события dragend вызывает функцию ending() в тот момент, когда пользователь отпускает перетаскиваемый элемент. Обратите внимание на то, что эти

События и функция не проверяют, завершился процесс успешно или нет, вам это нужно делать самостоятельно.

Благодаря этим функциям каждый раз, когда в процессе перетаскивания указатель мыши заходит в зону приема, соответствующий блок подсвечивается светло-зеленым цветом, а когда пользователь отпускает элемент, исходное изображение скрывается. Наблюдаемые изменения никак не влияют на процесс перетаскивания, но они обеспечивают обратную связь от приложения, направляя пользователя во время операции.

Для запрещения поведения по умолчанию нам приходится применять метод preventDefault() в каждой функции, даже если мы дополнительно настраиваем какие-то специальные действия.

Скопируйте код из листинга 8.4 в свой JavaScript-файл, откройте HTML-документ из листинга 8.1 в браузере и перетащите изображение на зону приема.

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

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