Главная Случайная страница


Полезное:

Как сделать разговор полезным и приятным Как сделать объемную звезду своими руками Как сделать то, что делать не хочется? Как сделать погремушку Как сделать так чтобы женщины сами знакомились с вами Как сделать идею коммерческой Как сделать хорошую растяжку ног? Как сделать наш разум здоровым? Как сделать, чтобы люди обманывали меньше Вопрос 4. Как сделать так, чтобы вас уважали и ценили? Как сделать лучше себе и другим людям Как сделать свидание интересным?


Категории:

АрхитектураАстрономияБиологияГеографияГеологияИнформатикаИскусствоИсторияКулинарияКультураМаркетингМатематикаМедицинаМенеджментОхрана трудаПравоПроизводствоПсихологияРелигияСоциологияСпортТехникаФизикаФилософияХимияЭкологияЭкономикаЭлектроника






Создание JavaScript функции

⇐ ПредыдущаяСтр 53 из 65Следующая ⇒

Перед тем, как писать функции - обработчики событий, кратко пробежимся по теоретическим аспектам.

Отслеживать процесс Drag and drop позволяют следующие события:

  • dragstart;
  • drag;
  • dragenter;
  • dragleave;
  • dragover;
  • drop;
  • dragend.

События dragenter, dragover и dragleave можно использовать для того, чтобы сделать процесс переноса более наглядным. Например, можно добавить рамку тому элементу, над которым происходит перетаскивание.

Для обработки процесса бросания элемента, надо назначить обработчик событий drop и dragend. В нем надо отменить поведение браузера по умолчанию, т.к. это может быть переход на другую страницу.

Объект DataTransfer (см. список материалов по теме) хранит данные отсылаемые в процессе перетаскивания. dataTransfer задается в событииdragset и используется в событии drop. Вызовe.dataTransfer.setData(format, data) устанавливает mimetype и данные нужные для перетаскивания.

Свойство dataTransfer имеет функцию getData(format) для получения сохраненных данных.

Свойство dataTransfer предоставляет возможность тонкой настройки отображения процесса переноса:

  • dataTransfer.effectAllowed. Эффект, поддерживаемый целевым элементом перетаскивания. Как правило, это значение задается обработчиком события dragstart. Может принимать следующие значения: none, copy, copyLink, copyMove, link, linkMove, move, all и uninitialized (см. список дополнительных материалов по теме).
  • dataTransfer.dropEffect. Эффект, выбранный пользователем или целевым элементом. Может принимать следующие значение: none, copy, link, move (см. список дополнительных материалов по теме).
  • dataTransfer.setDragImage(i, x, y). Вместо того чтобы использовать при перетаскивании полупрозрачную картинку по умолчанию (см. список дополнительных материалов по теме).

Теперь можно перейти к созданию самих функций:

function dragStart(ev) { ev.dataTransfer.effectAllowed='link'; ev.dataTransfer.setData("Text", ev.target.getAttribute('id')); ev.dataTransfer.setDragImage(ev.target,0,0); return true; } function dragEnter(ev) { var idelt = ev.dataTransfer.getData("Text"); return true; } function dragOver(ev) { var idelt = ev.dataTransfer.getData("Text"); var id = ev.target.getAttribute('id'); return false; } function dragEnd(ev) { ev.dataTransfer.clearData("Text"); return true } function dragDrop(ev) { var idelt = ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(idelt)); ev.stopPropagation(); return false; }

⇐ Предыдущая48495051525354555657Следующая ⇒





Date: 2015-07-22; view: 706; Нарушение авторских прав


mydocx.ru - 2015-2024 year. (0.006 sec.) Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав - Пожаловаться на публикацию