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

Question

我一直试图在Kefir dragdiv示例中加入一个drag end stream/oobserveble，但没有取得任何进展。在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>