RXJS 拖放

这个问题与 RXJS 有关。我正在尝试调整 github 中的拖放示例以适用于一类 div 而不仅仅是单个元素 ID。https://github.com/Reactive-Extensions/RxJS/blob/master/examples/dragndrop/dragndrop.html https://github.com/Reactive-Extensions/RxJS/blob/master/examples/dragndrop/dragndrop.html

为 div 提供类或 ID 的简单更改不起作用，并且我失去了拖动元素的能力

3个简单的改变：

HTML line 7 i.e. <div class="dragTarget">Drag Me!</div>
CSS line 1 i.e. .dragTarget { style attributes unchanged }
JS line 4 i.e var dragTarget = document.getElementsByClassName('dragTarget');

我不够熟练，不知道这是否是 RXJS 中的错误，或者该示例不够通用。有关 RXJS 事件的文档表明这些更改应该足够了。任何帮助表示赞赏。谢谢。

fromEvent将使用on and off您传递给它的任何对象的方法，否则它将使用addEventListener and removeEventListener。因此，如果您使用 jQuery，您可以简单地选择所有这些并使用它（Observable.fromEvent($('.targetNode'), 'mouseup')例如）。

否则，您可以使用任何带有on and off订阅或取消订阅事件的方法，就像我在下面所做的那样。

除此之外，您还可以使用target财产在MouseEvent你在每个流中获取的对象来获取你想要移动的实际 DOM 节点...

像下面的例子这样的东西应该可以解决问题。

(function (global) {

  /**
    selectNodes is a method to select a NodeList, but convert it to 
    a type that has `on` and `off` methods RxJS 2 expects to see for `fromEvent`
  */
  function selectNodes(selector) {
    var nodes = document.querySelectorAll(selector);

    return {
      // the selected nodes
      nodes: [].slice.call(this.nodes),

      // subscribe to an event on every selected node
      on: function(eventName, handler) {
        this.nodes.forEach(function(node) { node.addEventListener(eventName, handler); });
      },

      // unsubscribe from the event on every selected node
      off: function(eventName, handler) {
        this.nodes.forEach(function(node) { node.removeEventListener(eventName, handler); });
      }
    };
  }

  function main () {
    // IMPORTANT CHANGE: Use the selectNodes method we made
    var dragTargets = selectNodes('.dragTarget');

    // Get the three major events
    var mouseup   = Rx.Observable.fromEvent(dragTargets, 'mouseup');
    var mousemove = Rx.Observable.fromEvent(document,   'mousemove');
    var mousedown = Rx.Observable.fromEvent(dragTargets, 'mousedown');

    var mousedrag = mousedown.flatMap(function (md) {

      // calculate offsets when mouse down
      var startX = md.offsetX, startY = md.offsetY;

      // Calculate delta with mousemove until mouseup
      return mousemove.map(function (mm) {
        mm.preventDefault();

        return {
          left: mm.clientX - startX,
          top: mm.clientY - startY,
          target: mm.target, // IMPORTANT CHANGE: the element you care about
        };
      }).takeUntil(mouseup);
    });

    // Update position
    var subscription = mousedrag.subscribe(function (d) {
      d.target.style.top = d.top + 'px';
      d.target.style.left = d.left + 'px';
    });
  }

  main();

}(window));