d3.js強制取消拖動事件

Question

我有一個簡單的拖動事件-如果滿足特定條件，我想強制取消當前正在進行的拖動（基本上就像在做mouseup一樣）。

像這樣：

var drag_behavior = d3.behavior.drag()
.on("drag", function() {
    if(mycondition){
       // cancel the drag event
    }
});

編輯：

目的只是為了防止人們將世界地圖拖動到某些邊界之外，從而使地圖呈現在大洋中部（詳細信息如下）。

當前地圖代碼：

var width = window.innerWidth
var height = window.innerHeight

var projection = d3.geo.mercator()
    .scale((width + 1) / 2 / Math.PI)
    .translate([width / 2, height/1.5])
    .precision(.1);

var path = d3.geo.path()
    .projection(projection);

var drag_behavior_map = d3.behavior.drag()
.on("drag", function() {
    drag_click = true //used later to prevent dragend to fire off a click event
    d3.event.sourceEvent.stopPropagation();

    // original idea
    // if(worldmap_left_boundary > 0 || worldmap_right_boundary < screen.height){
    //    cancel or limit the drag here
    // }
});

var svg = d3.select("#map").append("svg")
    .attr("width", width)
    .attr("height", height)
.call(drag_behavior_map)

基本上這是不可能的。

Answer 1

在drag事件函數中，可以使用mycondition決定是否更新拖動元素的位置。 不更新位置實質上意味着停止拖動。

您也可以取消訂閱drag事件：

var drag_behavior = d3.behavior.drag()
  .on("drag", function() {
    if(mycondition) {
       // cancel the drag event
       drag_behavior.on("drag", null);
    }
  });

請注意，除非您也取消訂閱該事件，否則仍然會有一個dragend事件。

另外，盡管我並不完全了解觸發本機事件及其對d3.behavior.drag()影響， d3.behavior.drag()您可以嘗試觸發本機mouseup事件，看看會發生什么。

var drag_behavior = d3.behavior.drag()
  .on("drag", function() {
    if(mycondition) {
      // "this" is the dragged dom element
      this.dispatchEvent(new Event('mouseup'))
    }
  });