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将使用您传递给它的任何对象的onandoff方法，否则它将使用addEventListenerand removeEventListener。因此，如果您使用的是 jQuery，您可以简单地选择所有这些并使用它（Observable.fromEvent($('.targetNode'), 'mouseup')例如）。

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

除此之外，您可以使用在每个流中获得的对象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));