Эта статья нуждается в редакционном обзоре. Как вы можете помочь.
Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.
Firefox и прочие приложения компании Mozilla имеют ряд возможностей для управления drag и drop. Это позволяет пользователю нажать и удерживая зажатой кнопку мыши над элементом, переместить его на другую позицию, отпустив кнопку мыши пользователь может оставить элемент на новой позиции. На протяжении всей операции перемещения полупрозрачное представление элемента следует за курсором мыши. Новая позиция элемента может располагаться в совершенно другом приложении. Веб сайты, и XUL приложения могут использовать эту функциональность для того, чтобы определить какие элементы страницы могут быть перемещены, а также определить элементы куда первые могут быть перемещены.
Основы Drag и Drop
Использование функциональности drag и drop подразумевает выполнения следующих шагов:
- Определить переносимый элемент. Присвоить true атрибуту draggable элемента, который мы хотим перенести. Для детальной информации смотрите The Draggable Attribute.
- Определить данные, которые могут быть перемещены, они могут быть разного формата. К примеру, текстовые данные, содержащие строку текста который может быть перемещен. Для детальной информации смотрите Drag Data.
- (Необязательно) Определить изображение которое будет рядом с указателем мыши на протяжении всей операции перетаскивания. Если пользовательское изображение не будет определено, будет сгенерирована картинка по умолчанию, в зависимости от элемента, на котором была зажата кнопка мыши (что будет означать, что элемент переносят). Ознакомиться детально с установкой изображения перетаскивания можно по ссылке Setting the Drag Feedback Image.
- Определить возможные эффекты переноса. Возможны три таких эффекта:
copyпоказывает, что перемещаемые данные копируются из прежнего места расположения в новое,moveпоказывает, что перемещаемые данные полностью переносятся на новое место, иlinkпоказывает, что создается некая форма взаимодействия или связи создается между исходной точкой и точкой назначения. На протяжении операции перемещения, картинка которая следует за курсором мыши может меняться в зависимости от того, может ли элемент быть перемещен в область под курсором. Если перенос разрешен, перемещение может быть произведено. Смотрите Drag Effects для детальной информации. - Определить область назначения. По умолчанию браузер не позволяет перемещать что-либо на HTML элемент. Однако, чтобы сделать элемент активным для перемещения других элементов на него, просто отмените действие по умолчанию. То есть, подпишитесь на события "ondragenter" или "ondragover". Для детальной информации смотрите Specifying Drop Targets.
- Do something when the drop occurs. You may want to retrieve the data carried by the draggable target and do something accordingly. Для детальной информации, пожалуйста, смотрите Performing a Drop.
Mozilla и Firefox поддерживают ряд возможностей, которые выходят за рамку стандартной модели спецификации. Они позволяют пользователю перемещать несколько элементов и перемещать нестроковые данные. Для детальной информации смотрите Dragging and Dropping Multiple Items.
Для того, чтобы ознакомиться с общим списком данных поддерживаемых операцией drag and drop смотрите Recommended Drag Types.
Также доступны примеры с лучшей практикой использования операции drag and drop для перемещения данных разных типов:
See DataTransfer for a reference to the DataTransfer object.
События Drag
Ряд событий срабатывают на протяжении всей процедуры drag and drop. Запомните, что только drag-события срабатывают на протяжении операции перемещения; события мыши, такие как mousemove - нет. Также запомните, что события dragstart и dragend не срабатывают при попытке перенести файл из операционной системы в браузер.
Свойство dataTransfer всех событий перемещения содержит данные про все drag и drop операции.
dragstart- Срабатывает когда эламент начал перемещаться. The user is requesting to drag the element where the
dragstartevent is fired. Обработчик данного события может быть использован для сохранения информации о перемещаемом объекте, а также для изменения изображения, которое будет ассоциировано с перемещением. Дянное событие не срабатывает, когда некоторый файл будет переноситься из операционной системы в браузер. Для детальной информации Starting a Drag Operation. dragenter- Срабатывает, когда перемещаемый элемент попадает на элемент-назначение. Обработчик этого события показывает, что элемент находится над объектом на который он может быть перенесен. Если же обработчика нет, либо он не совершает никаких действий перемещение по умолчанию запрещено. Это событие также используется для того, чтобы подсветить либо промаркировать объект над которым происходит перемещения в случае, если перемещение на данный элемент разрешено. Для детальной информации смотрите Specifying Drop Targets.
dragover- Данное событие срабатывает когда курсор мыши перемещается над элементом в момент перемещения. Much of the time, the operation that occurs during a listener will be the same as the dragenter event. Для детальной информации смотрите Specifying Drop Targets.
dragleave- This event is fired when the mouse leaves an element while a drag is occurring. Listeners should remove any highlighting or insertion markers used for drop feedback.
drag- This event is fired at the source of the drag and is the element where
dragstartwas fired during the drag operation. drop- The
dropevent is fired on the element where the drop occurred at the end of the drag operation. A listener would be responsible for retrieving the data being dragged and inserting it at the drop location. This event will only fire if a drop is desired. It will not fire if the user cancelled the drag operation, for example by pressing the Escape key, or if the mouse button was released while the mouse was not over a valid drop target. For information about this, see Performing a Drop. dragend- The source of the drag will receive a dragend event when the drag operation is complete, whether it was successful or not. This event is not fired when dragging a file into the browser from the OS. For more information about this, see Finishing a Drag.