拖动

优质

小牛编辑

129浏览

2023-12-01

该行为会自动创建事件监听器来处理元素的拖动，可支持鼠标事件和触摸事件。

d3.behavior.drag()

构造一个新的拖拽行为；

drag.on(type[, listener])

注册指定的监听器listener 来接收拖动行为中指定类型type的事件；如果监听器listener 未指定，则为指定的类型type的事件返回当前已注册的监听器（事件类型可能包含命名空间，查看详细参见： dispatch.on），可支持的事件类型包括：

dragstart - 拖动开始时；
drag - 拖动移动时；
dragend - 拖动结束时（放下时）；

拖动事件（除了dragstart 和dragend）使用x和y属性来表示本地坐标系中拖动行为当前位置；默认情况下，这个位置即是鼠标（或触摸）的位置，然而，这个位置可以通过指定一个原点修改；拖动事件同时也提供dx和dy属性来表示鼠标的“瞬时”偏移量（相对于上一时刻的偏移：正数或负数），这两个属性有时比指定一个明确地原点更方便。

在拖动的动作中，一些浏览器的默认动作会自动被阻止（如：选择文本），另外，点击事件的默认行为随即变成一个非空拖动动作也会被禁止，以便允许链接的拖动。当在可拖动元素中注册了点击事件，你可以这样来检查click事件是否被禁止：

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([origin])

如果指定了原点origin ，设置原点访问器为指定的函数；如果未指定原点origin ，则返回当前原点访问器，原点默认为null；

原点访问器函数被用来确定拖拽开始时的起始位置，这就允许拖拽行为保存鼠标位置相对于开始元素位置的偏移量；如果原点访问器为空，元素位置被设置为鼠标位置时可能会有明显的跳动；如果指定了原点访问器，该函数会在鼠标被按下时调用，该函数会像其他函数调用方式一样被调用，即：会传递当前元素的数据d和元素索引i，还有this上下文代表当前点击的DOM元素；要访问当前发生的事件，可以使用d3.event；指定的原点访问器必须返回一个包含被拖动元素开始坐标x和y的对象；

原点访问器常常指定为恒等函数：function(d) { return d; }，当前元素已绑定了一个包含坐标位置x和y的对象时是最合适的，详细参见： http://bl.ocks.org/1557377。