drag-and-drop - RXJS 拖放

Question

这个问题与RXJS有关。我正在尝试调整 github 中的拖放示例，使其适用于一类 div，而不仅仅是单个元素 ID。
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 事件的文档表明这些更改应该足够了。任何帮助表示赞赏。谢谢。

Answer 1

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

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

除此之外，您可以使用 target MouseEvent 上的属性(property)您在每个流中获得的对象以获得您想要移动的实际 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));