RXjs로 드래그 앤 드롭

RXJS에서 드래그 앤 드롭 동작에 어려움을 겪고 있습니다. 해당 요소의 클릭 이벤트를 납치하지 않기 위해 250ms 마우스를 끈 후에 요소를 드래그하고 싶습니다.RXjs로 드래그 앤 드롭

지금까지 시작 끌기는 작동하지만 멈춤 끌기는 결코 호출되지 않습니다. 왜 그런지 알아?

let button = document.querySelector('.button'); 

let mouseDownStream = Rx.Observable.fromEvent(button, 'mousedown'); 
let mouseUpStream = Rx.Observable.fromEvent(button, 'mouseup'); 

let dragStream = mouseDownStream 
    .flatMap((event) => { 
    return Rx.Observable 
     .return(event) 
     .delay(250) 
     .takeUntil(mouseUpStream) 
    }); 

let dropStream = mouseUpStream 
    .flatMap((event) => { 
    return Rx.Observable 
     .return(event) 
     .skipUntil(dragStream) 
    }); 

dragStream.subscribe(event => console.log('start drag')); 
dropStream.subscribe(event => console.log('stop drag'));

JSBin

출처

2017-04-12 bjorkblom

나는 그것을 실행하기 위해 코드 샘플을 업데이트 한, 내가 무슨 짓을했는지 :

는 switchMap의 (switchMap가 flatMapLatest의 별칭)로 flatMap의 교환 이렇게하면 최신 이벤트 만 가져오고 새 이벤트가 발생하는 경우 오래된 하위 이벤트가 취소됩니다.이 경우 flatMap이 제대로 작동하지만 switchMap, als를 사용하면 더 안전합니다. 엄지 손가락의 OA 규칙 : 의심 : switchMap
dropStream을 사용하여 결정하는 요소는/dragStream에 의해 시작된 지금
제거가 처음 다음 dragStream 방출 후 후 트리거 것 때문에 경주 조건의 문제를했다 skipUntil, (시간을 거슬러 여행을 필요로) 일부와 mouseUp는
는 (그동안의 일을 작업의 편의를-것보다, 정말 중요하지 않음)

let button = document.querySelector('.button'); 
 

 
let mouseDownStream = Rx.Observable.fromEvent(button, 'mousedown'); 
 
let mouseUpStream = Rx.Observable.fromEvent(document, 'mouseup'); 
 

 
let dragStream = mouseDownStream 
 
    .switchMap((event) => { 
 
    return Rx.Observable 
 
     .return(event) 
 
     .delay(250) 
 
     .takeUntil(mouseUpStream) 
 
    }); 
 

 
let dropStream = dragStream 
 
    .switchMap(() => mouseUpStream.take(1)) 
 

 
dragStream.subscribe(event => console.log('start drag')); 
 
dropStream.subscribe(event => console.log('stop drag'));

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/4.1.0/rx.all.js"></script> 
 
    <meta charset="utf-8"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 
<button class="button">Button</button> 
 
</body> 
 
</html>

0 document에 button에서 모르기 때문에 mouseUp 대상을 교환

출처

2017-04-12 12:30:36 olsn

답장을 보내 주셔서 감사합니다. 여전히 예상대로 작동하지 않습니다. 처음으로 드래그 앤 드롭하면 작동합니다. 그 후, 버튼을 클릭 할 때마다 중지 드래그가 기록됩니다. – bjorkblom

참, 나는 그것을 놓쳤습니다. - 그러나 그것은'.take (1)'을 추가함으로써 정말로 명백한 수정이었습니다 - 누구든지 그것을 볼 수있었습니다 ;-) – olsn

답변

관련 문제