Поведение перетаскивания

Справочник API ▸ Поведения ▸ Поведение перетаскивания

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

d3.behavior.drag()

Создаёт новое поведение перетаскивания. После создания вы можете применить поведение перетаскивания к выбранным элементам, используя selection.call:

var drag = d3.behavior.drag();
selection.call(drag);

Все зарегистрированные обработчики используют пространство имён «drag», поэтому для последующего удаления поведения:

selection.on(".drag", null);

drag.on(тип[, обработчик])

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

• dragstart - когда начинается жест перетаскивания.
• drag - когда жест перетаскивания перемещается.
• dragend - когда жест перетаскивания завершается.

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

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

selection.on("click", function() {
  if (d3.event.defaultPrevented) return; // click suppressed
  console.log("clicked!");
});

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

drag.on("dragstart", function() {
  d3.event.sourceEvent.stopPropagation(); // silence other listeners
});

drag.origin([начало])

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

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

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