Question

当我点击并拖动某个项目时。有没有办法强行让它停止可拖动而不用放开鼠标按钮？

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

Answer 1

jsfiddle example。我从另一个用户分叉了一个拖动示例，在代码中添加了一个工作边界。单击以创建一个圆，然后将其拖到蓝色框上以查看它是否正常工作。

这里的概念是观察x＆amp;在拖动对象时，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为其创建调度程序对象的事件（请参阅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/

Javascript d3：有没有办法以编程方式停止拖动项目？

1 个答案: