RaphaelJS中的文本元素不会在触摸设备上拖动

Text element in RaphaelJS not dragging on touch device

本文关键字:触摸 拖动 文本 元素 RaphaelJS      更新时间:2023-09-26

如果我创建一个文本元素并添加一个拖动处理程序,它不会在触摸设备上移动。我可以看到移动事件被触发,但元素没有拖动。如果我创建一个路径元素并附加相同的拖动处理程序,则路径元素在触摸设备上移动得很好。所有元素在我的笔记本电脑上的Chrome和Firefox上都可以正常工作。

我必须做一些特别的事情才能让文本元素在触摸设备上拖动吗?

这是我正在做的事情的片段。我确实删除了一些不相关的代码,所以它可能看起来有点奇怪。

var word = paper.text(xVal, yVal, "text"]);
word.drag(window.move, window.start, window.up)
window.start = function() {
  this.lastDx = 0;
  this.lastDy = 0;
};
window.move = function(dx, dy) {
  this.transform("...T" + (dx - this.lastDx) + "," + (dy - this.lastDy));
  this.lastDx = dx;
  this.lastDy = dy;
  return this;
};
window.up = function() {
  this.lastDx = 0;
  this.lastDy = 0;
};

经过一些试验和错误,我能够通过创建一个"包装"文本的矩形来解决这个问题。我在矩形上填充了一个不透明度为 0,然后将矩形和文本组合在一起,并使该集成为可拖动的部分。

Raphael 2.1.1 中修复了此问题。以前的版本报告NaN触摸设备上的dx/dy,因此如果您使用这些设备进行拖动,则它将不起作用。

请参阅 https://github.com/DmitryBaranovskiy/raphael/issues/328