RU Перетаскивание

Вики ▸ Справка по API ▸ Поведение ▸ Перетаскивание
English | Русский

Это поведение автоматически создаёт слушатели событий для обработки жестов перетаскивания на элементе. Поддерживаются как события мыши, так и события прикосновения.

# d3.behavior.drag()

Конструирует новое передение перетаскивания.

# drag.on(type[, listener])

Регистрирует указанный слушатель listener для приёма событий указанного типа type от поведения перетаскивания. Если параметр listener не указан, возвращает текущий зарегистрированный слушатель для указанного типа события type (параметр type может включать пространство имён; смотрите dispatch.on для подробностей). Поддерживаются следующие типы событий:

• dragstart — возникает при начале жеста перетаскивания.
• drag — возникает при перемещении.
• dragend — возникает при окончании жеста перетаскивания.

Событие drag (но не dragstart и dragend) выставляет свойства "x" и "y", представляющие текущую позицию перетаскивания в локальных координатах. По умолчанию, эта позиция просто позиция мыши (или касания); однако, позиция может быть изменена путём определения начала координат. Также событие drag выставляет свойства "dx" и "dy", представляющие координаты элемента относительно его позиции в начале жеста, что иногда удобнее явного указания начала координат.

Во время перестаскивания предотвращается некоторое поведение по умолчанию браузеров (например, выделение текста). Кроме того, поведение по умолчанию для события щелчка немедленно предотвращается при непустом событии перетаскивания, что позволяет перетаскивать ссылки. Когда вы регистрируете свои собственные слушатели щелчков на перетаскиваемых елементах, вы можете проверить, было ли подавлено событие щелчка, следующим образом:

selection.on("click", function() {
  if (d3.event.defaultPrevented) return; // щелчок был подавлен
  console.log("clicked!");
});

При комбинировании поведения перетаскивания с другими слушателями событий интерактивных событий, вы можете захотеть остановить распространение исходного события для предотвращения возникновения нескольких действий одновременно:

drag.on("dragstart", function() {
  d3.event.sourceEvent.stopPropagation(); // глушим других слушателей
});

# drag.origin([origin])

Если указан параметр origin, устанавливает функцию доступа к началу координат в указанную функцию. Если параметр origin не указан, возвращает текущую функцию доступа, которая по умолчанию установлена в null.

Функция доступа к началу координат используется для определения начальной позиции («начала координат») перетаскиваемого элемента; это позволяет поведению перетаскивания сохранять смещение между положением мыши и начальной позицией элемента во время перетаскивания. Если функция доступа к началу координат установлена в null, то позиция элемента устанавливается в позицию мыши при перетаскивании; это может вызвать заметный скачок для больших элементов. Если функция доступа к началу координат указана, она вызывается по событию mousedown. Функция вызывается тем же самым способом, что и другие опрераторы, с передачей в неё текущей привязки к данным d и индекса i, контекст this привязывается к элементу DOM, по которому был произведён щелчок. Для доступа к текущему событию используйте глобальный объект d3.event. Функция доступа к началу координат должна возвращать объект со свойствами x и y, представляющими начальные координаты перетаскиваемого элемента.

Часто функция доступа к началу координат определяется как единичная функция: function(d) { return d; }. Это удобно, когда данные, привязынные к элементу, уже являются объектом с атрибутами x и y, представляющими его текущую позицию. Например: http://bl.ocks.org/1557377.