Kefir.js 拖动示例-拖动结束

Question

我一直在尝试将拖动结束流/可观察到的因素纳入 Kefir 拖动 div 示例中，但没有取得任何进展。在组合使用 mousedown、mousemove 和 mouseup 后触发事件似乎很有意义，但我就是找不到让它工作的方法。有什么想法吗？

Answer 1

这对我来说效果很好：

var dragTarget = document.querySelector('#draggable');

var mouseDowns = Kefir.fromEvents(dragTarget, 'mousedown');
var mouseMoves = Kefir.fromEvents(document, 'mousemove');


var moves = mouseDowns.flatMap(function(downEvent) {
  var mouseUp = Kefir.fromEvents(dragTarget, 'mouseup').take(1).onEnd(function(){
    alert('done dragging');
  });
  return mouseMoves.takeUntilBy(mouseUp)
    .diff(eventsPositionDiff, downEvent);
});

// Pure functions

function eventsPositionDiff(prevEvent, nextEvent) {
  return {
    x: nextEvent.clientX - prevEvent.clientX,
    y: nextEvent.clientY - prevEvent.clientY
  };
}

function applyMove(currentPosition, move) {
  return {
    x: currentPosition.x + move.x,
    y: currentPosition.y + move.y
  };
}


var dragTarget = document.querySelector('#draggable');

var mouseDowns = Kefir.fromEvents(dragTarget, 'mousedown');
var mouseMoves = Kefir.fromEvents(document, 'mousemove');


var moves = mouseDowns.flatMap(function(downEvent) {
  var mouseUp = Kefir.fromEvents(dragTarget, 'mouseup').take(1).onEnd(function(){
    alert('done dragging');
  });
  return mouseMoves.takeUntilBy(mouseUp)
    .diff(eventsPositionDiff, downEvent);
});



var position = moves.scan(applyMove, {x: 0, y: 0});


// Add side effect

var el = document.querySelector('#draggable');
position.onValue(function(pos) {
  el.style.top = pos.y + 'px';
  el.style.left = pos.x + 'px';
});

#draggable {
    width: 50px;
    height: 50px;
    position: absolute;
    background: #b9ffb9;
    cursor: move;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: .2em;
}

<script src="https://cdn.jsdelivr.net/kefir/3.1.0/kefir.js"></script>
<div id="draggable">Drag me</div>

Kefir.js 拖动示例-拖动结束

Kefir.js drag example - drag end

rxjs

kefir.js