Question

尝试从Rxjs课程示例创建拖放实现，但它无法正常工作。有时候盒子被拖回到原来的位置有时会卡住。这是傻瓜 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总能正常工作，但如果没有这个，我就无法实现drop功能。

Answer 1

问题一：有时候盒子被拖回到原来的位置有时会卡住。答：你应该更换连锁店的订单，＆＃34; .do＆＃34;之前＆＃34; .withLatestFrom＆＃34;像这样：

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

问题二：掉落并拖到外面不能正常工作。答案：因为鼠标事件引起了＆＃34;指针事件＆＃34;不清楚。在Css文件中，位于：

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

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

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

（霍莉屎，我花了8个小时来解决这个问题。阅读更多或看看回复：Repository ）

使用Rxjs无法正常拖放实现

1 个答案: