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

【问题标题】：Kefir.js drag example - drag endKefir.js 拖动示例 - 拖动结束
【发布时间】：2016-04-02 09:42:58
【问题描述】：

我一直在尝试将拖动结束流/observerble 考虑到 Kefir 拖动 div 示例中，但没有得到任何结果。在 mousedown、mousemove 和 mouseup 组合之后触发事件似乎是有道理的，但我就是找不到让它工作的方法。有什么想法吗？

【问题讨论】：

jsfiddle.net/4Lx9ktpp

标签： rxjs kefir.js

【解决方案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>

【讨论】：