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

2024-01-09

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

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


jsfiddle 示例 http://jsfiddle.net/typeofgraphic/Ne8h2/4。我从另一个用户那里分叉了一个拖动示例,并在代码中添加了工作边界。单击以创建一个圆圈,然后将其拖动到蓝色框上以查看其工作情况。

这里的概念是观察 x 和 y 坐标d3.event当拖动对象时,然后通过如下所示的两种方式之一触发“停止”事件。缺点是,在拖动事件接收到 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")

将鼠标悬停事件附加到“边界框”不起作用,因为拖动的对象将位于鼠标和框之间。也许那里也有一个解决方法。我添加了另一个较小的红色框(打开控制台可以看到这个not在职的)。

sources:

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

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

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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Javascript d3:有没有办法以编程方式停止拖动项目? 的相关文章

随机推荐

  • 动态创建类实例的最有效方法是什么?

    我不知道从一开始就会有多少个类实例 所以我需要动态创建它们 但我也想保持代码整洁和可读 我正在考虑做这样的事情 names Jon Bob Mary class Person def init self name self name nam
  • 如何在 R 中将多列转换为单独的行

    我在 R 中有一个数据帧 其中有许多行 超过 3000 行 其中包含 F0 基本频率 轨迹轨迹 这些行包含以下信息 说话者 ID 组号 重复次数 口音类型 性别 以及 50 列 F0 点 数据如下 Speaker Sex Group Rep
  • 3D 空间(模型/世界、视图/眼睛、投影)

    这不是一个问题 但我对 3D 空间对应什么感到非常困惑 我习惯于听到模型 视图 投影空间 但在我的工作中他们使用世界 眼睛 投影 我没有意识到世界和眼睛是模型和视图的同义词 因此如果有人对此有任何困惑 我发现以下说明可以帮助您 希望它会对您
  • 数据框将整列从数字类型转换为字符

    假设我有一个data frame这完全是numeric 如果我在第一列中输入一个character 例如 那么整个第一列将变成character Question 怎样才能扭转这个局面呢 也就是说 我怎样才能使任何character里面的物
  • 如何在php中使用curl将上传文件发送到其他网站?

    如何使用 PHP 中的 Curl 将文件上传到另一个网站并获取响应页面 网站 http www postto me http www postto me
  • 如何录制 iPhone 的音频输出? (就像我的应用程序的声音)

    我想录制我的 iPhone 应用程序的声音 就像有人在 iPhone 乐器上演奏一样 之后你就可以听到它的声音 没有微博可以吗 你的意思是你自己构建的应用程序吗 如果是 您可以保存渲染的波形 可能经过编码 压缩以节省空间 以供以后播放 看
  • python 装饰器中的 self

    我想要一个装饰器将装饰函数添加到列表中 如下所示 class My Class object def init self self list decorator def my function self print Hi 我希望将 my f
  • 使用 Jackson JSON 处理器而不使用注释

    我有一个包 其中仅包含 xsd 文件来生成 通过 JAXB 与我们的服务器和客户端应用程序相关的共享类 所以这些类包含 XML 注释 一个客户端是 Android 应用程序 我还想在此处使用这些类进行 JSON 反序列化 因为我与提供 JS
  • 如何为 UML 序列图上的每个循环建立 Java 模型?

    for Item i collection i foo 在一些抽象序列图中 你有一个loop组合片段与 条件 例如 对于每个项目 以 Java 实现为特色的序列图 你会用什么作为循环保护 如果所有生命线都必须代表一个对象实例 您将如何表明i
  • $routeProvider 和 $stateProvider 有什么区别?

    请解释一下之间的区别 routeProvider and stateProvider在 AngularJS 中 哪个是最佳实践 两者的工作原理相同 因为它们在 SPA 单页应用程序 中用于路由目的 1 Angular 路由 每 routeP
  • 如何从 JQUERY 移动列表视图中删除元素

    有一个列表视图 它在加载页面时动态加载 这会在列表视图中添加元素 问题是我放置了后退按钮 在转到上一个屏幕并返回到当前屏幕后 它正在加载数据并附加到列表视图 I need to remove the li elements from the
  • PHP 将数组提取到变量中

    我有以下输出我试图将各个值放入单独的变量中 output Array 0 gt Array 0 gt 8711 1 gt 200 2 gt 755 3 gt 1800 4 gt 01 5 gt 675 6 gt 8910 我尝试过以下代码但
  • 无法将变量添加到以下划线开头的表中(Laravel)

    我无法向 MySQL 添加值 因为行名称以 开头 SQLSTATE HY000 一般错误 1364 字段 user id 没有 默认值 我无法更改 SQL 表首选项 因为我们正在使用旧数据库编写新项目 attributes request
  • 在sql server中将列转换为行及其各自的数据

    我有一个场景 我需要将表的列转换为行 例如 表 库存 ScripName ScripCode Price 20 MICRONS 533022 39 我需要用以下格式表示表格 但我只需要这种单行表示 ColName ColValue Scri
  • 寻找 RSS 应用程序的 Google Reader 同步替代方案

    我正处于设计 RSS 应用程序的早期阶段 我希望将同步到在线 RSS 提要服务作为一项功能 大多数此类应用程序都利用 Google Reader 的提要 同步功能 但 Google 现在正在将同步功能从 Reader 服务中移出 而且其 A
  • React:访问React内部操作队列

    React 收集操作 https reactjs org docs implementation notes html updating host components 就像 ADD REPLACE REMOVE 等 DOM 操作一样 这样
  • 如何使用最新的 Facebook sdk 从 iOS 中的 Facebook API 获取用户的生日?

    如何使用最新的 Facebook sdk 从 iOS 中的 Facebook API 获取用户的生日 我尝试去获取它 fields id name link first name last name picture type large e
  • 如何从 Java 代码更新 Jenkins config.xml?

    我是 Jenkins 插件开发的新手 所以如果问题很愚蠢 请原谅我 我目前正在开发一个 Jenkins 插件 它提供了一个非常小的配置选项列表 如所附屏幕截图所示 该表单是使用 Jelly 脚本设计的 我必须从我的 Java 代码更新作业的
  • Tensorflow 中的 zip 之类的函数? Tensorflow张量运算

    我的问题是关于 Tensorflow 中的张量运算 比方说 import tensorflow as tf import numpy as np a tf Variable np random random 10 3 3 b tf Vari
  • Javascript d3:有没有办法以编程方式停止拖动项目?

    当我单击并拖动项目时 有没有办法在不松开鼠标按钮的情况下强制使其停止可拖动 例如 如果我将一个项目拖过某个边界框 我可以让它放开所拖动的项目吗 jsfiddle 示例 http jsfiddle net typeofgraphic Ne8h