Я использую React-konva.
Я реализовал горизонтальный элемент управления с перетаскиваемой ручкой.
У меня есть Стадия, Слой, и дескриптор - это группа внутри него.Группа, представляющая маркер, является перетаскиваемой, а позиции перетаскивания ограничены горизонтальным перемещением.
Когда я перетаскиваю маркер, он работает нормально, но когда мышь покидает рабочую область, перетаскивание застревает: даже если я отпущу мышькнопка, дескриптор все еще перетаскивается (группа дескриптора все еще получает события onDragMove).Если я щелкну в рабочей области, мышь отпустится, и перетаскивание будет остановлено.
Как мне справиться с этим?Должен ли я обнаружить, что мышь вышла из-под контроля и как-то реагировать?
Вот соответствующие части кода:
restrictDragToHorizontal(pos) {
return {x: pos.x, y: this.getAbsolutePosition().y};
}
render() {
...
return (
<div className="Timeline">
</div>
<Stage width={...} height={...}>
<Layer>
<Group name="handle" draggable={true} x={...} y={...}
onDragMove={ (event) => {
...
}}
onDragEnd={ (event) => {
...
}}
dragBoundFunc={this.restrictDragToHorizontal}
>
<Rect ... />
<Circle ... />
<Text ... />
</Group>
</Layer>
</Stage>
)
}