Javascript d3:是否有一种方法可以通过编程方式停止拖动项目

Javascript d3: Is there a way to programmatically stop dragging an item?

本文关键字：编程 可以通过 方法 方式停 项目 拖动 一种 是否 d3 Javascript      更新时间：2023-09-26

当我点击并拖动一个项目时。有没有一种方法可以在不松开鼠标按钮的情况下强制使其停止可拖动?

例如，如果我将一个项目拖过某个边界框，我可以让它放开被拖的项目吗?

jsfield示例。我从另一个用户那里继承了一个拖拽示例，在代码中添加了一个工作边界。点击创建一个圆圈，然后将它拖到蓝色框上，看看它是否工作。

这里的概念是观察x &当一个对象被拖动时，在d3.event中的y坐标，然后触发"停止"事件，如下所示。缺点是，在拖动事件接收到mouseUp之前，它会在仍按下鼠标时抛出错误。

// Define drag beavior
var drag = d3.behavior.drag()
    .on("drag", dragmove);
function dragmove(d) {
    // if the event.x goes over a boundry, trigger "dragend"
    if(d3.event.x > 200){
        // using D3 
        drag.dragend(); 
       // or using jquery 
       drag.trigger("dragend");
    }
  var x = d3.event.x;
  var y = d3.event.y;
  d3.select(this).attr("transform", "translate(" + x + "," + y + ")");
}

这里的边界基于一个变量- x位置，但可以扩展为基于形状的表面积。

Drag被用作这个事件的命名空间，D3为这个事件创建了一个dispatcher对象(参见D3库代码)。可以通过调用事件名称(例如)

来访问。
drag.on("eventName", functionToDo)
drag.eventName();

或者如果你想使用JQuery，那么触发器可以使用:

drag.trigger("dragend")

将鼠标悬停事件附加到"边界框"上不起作用，因为被拖动的对象将位于鼠标和框之间。也许这里也有变通的办法。我已经包含了另一个较小的红框(打开控制台，看到这个没有工作)。

来源:

https://github.com/mbostock/d3/wiki/Drag-Behavior

https://github.com/mbostock/d3/wiki/Internals dispatch_on

http://api.jquery.com/trigger/

相关文章：