javascript - 仅在长按后处理 d3 拖动事件
问题描述
我有处理在 d3 中拖动的代码。
而且我只想在 1000 毫秒后发出拖动事件。(长按)
这对于移动设备来说是必要的,以获得更好的用户体验。
var mouseover_node = null;
var svg = d3.select('body').append('svg').attr('width', 1000).attr('height', 1000);
var rect = svg.selectAll('rect')
.data([0, 2, 3])
.enter().append('rect')
.attr('x', function(x) { return +x * 0; })
.attr('y', function(y) { return +y * 120; })
.attr('width', function() { return 100; })
.attr('height', function() { return 100; })
.attr('fill', function(x) { if(x == 0){return'red';}else return 'blue'; });
rect.on("mouseover", (d) => {this.mouseover_node = d})
.on("mouseout", (d) => {this.mouseover_node = null})
.call(d3.drag()
.on("start", function () {
console.log('start');
return false;
})
.on("drag", function () {
console.log('drag');
})
.on("end", (sourceElement,index,svgItems) => {
console.log('end drag with mouseover: ' + this.mouseover_node);
})
);
我们如何在 JavaScript 中做到这一点?
解决方案
可能使用Date.now()
and"start"
并"drag"
检查经过的时间是否大于 1000 毫秒。
var click_start, drag_start;
rect.call(
d3.drag()
.on("start", function () {
console.log("start");
click_start = Date.now();
})
.on("drag", function () {
drag_start = Date.now();
if (drag_start - click_start >= 1000) {
console.log("drag");
}
})
);
推荐阅读
- amazon-web-services - Lamba 执行角色 - 调用 putObject 时拒绝访问
- vb.net - Clipboard.GetText() 函数不适用于组框内的文本框控件
- mysql - MySQL 在 Raspberry Pi 3 的清单条目中没有与 linux/arm/v7 匹配的清单
- python - 如何使用python从驱动器的文件夹中检索文件?
- java - java.util.Calendar getMaximum 最后一天返回错误
- node.js - 安装 npm 包时的 UNABLE_TO_VERIFY_LEAF_SIGNATURE
- angular - 角度 6 中的分页概念
- powershell - 如何使用 Get-Item().SetValue [UnauthorizedAccessException] 设置注册表值
- python - 删除重复项并将它们添加到一行中
- c# - Do-While 循环,但 while 语句的值在 Do 语句内