使用 Rxjs 实现的拖放不起作用答案

【问题标题】：Drag and Drop implemented using Rxjs not working使用 Rxjs 实现的拖放不起作用
【发布时间】：2016-12-13 06:14:33
【问题描述】：

尝试从 Rxjs 课程示例创建拖放实现，但无法正常工作。有时盒子被拖回原来的位置，有时它只是卡住了。这是plunkr https://plnkr.co/edit/9Nqx5qiLVwsOV7zU6Diw?p=preview

js代码：

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

如果我删除 withLatestFrom 运算符，那么拖动 div 总是可以正常工作，但没有这个我无法实现拖放功能。

【问题讨论】：

标签： javascript reactive-programming rxjs5

【解决方案1】：

问题一：有时盒子被拖回原来的位置，有时它只是卡住了。答：你应该像这样在“.withLatestFrom”之前替换链的顺序，“.do”：

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

问题二：拖放到外面不能正常工作。答：由于“指针事件”引起的鼠标事件不清楚。在 Css 文件中，位于：

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

这还不够，“mouseout”（或“mouseleave”）仍在工作，所以当您拖放框时。它同时发生事件“mouseover”和“mouseout”。所以拖动区域永远不会改变颜色。该怎么办？：通过清除目标元素中的每个鼠标事件来使其变得更好。在这种情况下，它是 div#drag.dragable.dragging。只将这个添加到 CSS 中，问题就解决了。

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

（天哪，我花了 8 个小时来解决这个问题。阅读更多或查看 Repo：Repository )

【讨论】：