javascript - 使用 RxJS Observable 更改拖动事件的 css 类

Question

嗨，我的目标是使用 Observable 序列来监听 dragEnter/dragleave 事件以更改 css 类。即:

var myDraggableListEl = document.querySelector....

var itemDragIn$ = Rx.Observable.fromEvent(myDraggableListEl, 'dragenter').map((e)=> e.target);

var itemDragOut$ = Rx.Observable.fromEvent(myDraggableListEl, 'dragleave').map((e)=> e.target);

基本上我只想在“dragenter”上添加一个“悬停”类，然后在 dragleave 上删除相同的类。

我想知道是否有一种聪明的方法来“合并”这两个，以便订阅就像这样:

.subscribe( (boolAdd, className, target ) => {
   boolAdd ?  target.classlist.add(className): target.classlist.remove(className)
}

也许我只是想多了，我只是将两个可观察对象分开，但只是想知道是否有人已经完成了这个或者他们是否有更好的方法。谢谢!

Answer 1

您完全可以使用 Rx.Observable.merge() 方法完成此操作。

链接:

• > merge - general rx
• > merge - rxjs example

示例(这里是 Fiddle ):

Rx.Observable.merge(
    Rx.Observable.fromEvent($el, 'dragenter').map(function(e) {
        return { target: e.target, isAdd: true, className: 'dragg' }
    }),
    Rx.Observable.fromEvent($el, 'dragleave').map(function(e) {
        return { target: e.target, isAdd: false, className: 'dragg' }
    }))
    .subscribe(function(obj){
        if(obj.isAdd) {
            obj.target.classlist.add(obj.className);
        } else {
            obj.target.classlist.remove(obj.className);
        }
    });

尽管请考虑以下内容可能更具可读性:

    // addClass and removeClass are defined somewhere (can represent jquery's functions)
    Rx.Observable
        .fromEvent($el, 'dragenter')
        .subscribe(function(e){
            addClass(e.target, 'dragg');
        });

    Rx.Observable
        .fromEvent($el, 'dragleave')
        .subscribe(function(e){
            removeClass(e.target, 'dragg');
        });