Rxjs를 사용하여 끌어서 놓기가 작동하지 않습니다.

Question

Rxjs 과정 예제에서 끌어서 놓기 구현을 만들려고했지만 제대로 작동하지 않습니다. 언젠가는 상자가 원래의 위치로 다시 드래그되어 몇 번 붙어 있습니다. 나는 withLatestFrom 연산자를 제거하면

var $drag = $('#drag'); 
var $document = $(document); 
var $dropAreas = $('.drop-area'); 

var beginDrag$ = Rx.Observable.fromEvent($drag, 'mousedown'); 
var endDrag$ = Rx.Observable.fromEvent($document, 'mouseup'); 
var mouseMove$ = Rx.Observable.fromEvent($document, 'mousemove'); 

var currentOverArea$ = Rx.Observable.merge(
    Rx.Observable.fromEvent($dropAreas, 'mouseover').map(e => $(e.target)), 
    Rx.Observable.fromEvent($dropAreas, 'mouseout').map(e => null) 
); 

var drops$ = beginDrag$ 
    .do(e => { 
    e.preventDefault(); 
    $drag.addClass('dragging'); 
    }) 
    .mergeMap(startEvent => { 
    return mouseMove$ 
     .takeUntil(endDrag$) 
     .do(moveEvent => moveDrag(startEvent, moveEvent)) 
     .last() 
     .withLatestFrom(currentOverArea$, (_, $area) => $area); 
    }) 
    .do(() => { 
    $drag.removeClass('dragging') 
     .animate({top: 0, left: 0}, 250); 
    }) 
    .subscribe($dropArea => { 
    $dropAreas.removeClass('dropped'); 

    if($dropArea) $dropArea.addClass('dropped'); 
    }); 

    function moveDrag(startEvent, moveEvent) { 
    $drag.css(
     {left: moveEvent.clientX - startEvent.offsetX, 
     top: moveEvent.clientY - startEvent.offsetY} 
    ); 
    } 

는 다음 DIV의 드래그 항상 잘 작동하지만,이없이 내가 드롭 기능을 구현받을 수 없습니다 : 여기 https://plnkr.co/edit/9Nqx5qiLVwsOV7zU6Diw?p=preview

JS의 코드 plunkr에게 있습니다.

Answer 1

문제 1 : 상자가 원래 위치로 몇 시간 뒤로 끌리면 잠시 멈 춥니 다. 답변 :이 같은 ".withLatestFrom"전에 체인 "수도 있었죠"의 순서를 교체해야합니다 :

const drops$ = beginDrag$ 
.do(e => { 
    e.preventDefault(); 
    $drag.addClass('dragging'); 
}) 
.mergeMap(startEvent => { 
    return mouseMove$ 
    .takeUntil(endDrag$) 
    .do(mouseEvent => { 
    moveDrag(startEvent, mouseEvent); 
    }) 
    .last() 
    .do((x) => { 
    console.log("hey from last event",x); 
    $drag.removeClass('dragging') 
    .stop() 
    .animate({ top:0, left: 0}, 250); 
    } 
) 
    .withLatestFrom(currentOverArea$, (_, $area) => { 
    console.log('area',$area); 
    return $area; 
    }); 

문제 2 : 드롭 제대로 작동하지 않는 외부 끕니다. 답변 : "포인터 이벤트"로 인해 발생하는 마우스 이벤트가 명확하지 않습니다. 에서 CSS 파일에서 :

.dragable .dragging { 
      background: #555; 
      pointer-events: none; 
     } 

이, 충분히 "로 마우스를"아니다 (또는 "하는 MouseLeave") 여전히 작동, 그래서 당신은 상자를 드래그 앤 드롭 할 때. 동일한 시간 이벤트 "mouseover"및 "mouseout"이 발생합니다. 따라서 드래그 영역은 결코 색상을 변경하지 않습니다. 수행 할 작업 : 대상 요소의 모든 마우스 이벤트를 지우면 좋습니다. 이 경우 div # drag.dragable.dragging입니다. 이것을 CSS에만 추가하면 문제가 해결됩니다.

div#drag.dragable.dragging { 
      pointer-events: none; 
     } 

(. 홀리 똥, 그것은이 문제를 해결 8 시간 Readmore 날을하거나에서 리포을 참조하십시오 Repository )