如何阻止可拖动恢复到原始位置

Question

我正在 Angular 4 中创建自己的自定义材质设计滑块，我已经到了这样一个地步：如果我拖动滑块拇指，它会移动，但在鼠标向上时它会恢复到原始位置。

我阅读了dragEvents，但由于可放置区域与我拖动的对象完全相同，因此我似乎找不到使其停止恢复到原始位置的解决方案。

您可以使用此 url 复制此行为，因为它足以使页面变长

https://stackblitz.com/edit/angular-1ndu2t

Answer 1

添加一个 dragend 处理程序将修复它：

    this.slider.addEventListener('dragend', this.onDrag.bind(this), false);

当您将日志添加到事件侦听器时，当您松开鼠标时，您会看到 x（和 y）为负数，但由于 dragend 将给出正确的值作为最后一个值，因此可以解决问题：

onDrag(event: DragEvent) {
  console.log(event.x);
  this.updateValueFromPosition({ x: event.x, y: event.y });
}