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

Question

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

我读了dragEvents但由于可放置区域是我拖动的同一个对象，我似乎无法找到解决方案让它停止恢复到原始位置。

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

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 });
}