使用 RxJS Observable 在拖动事件上更改 css class

Question

嗨，我的目标是使用 Observable 序列来监听 dragEnter/dragleave 事件来改变 css classes。即：

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' 上添加一个 'hover' class，然后在 dragleave 上删除相同的 class。

我想知道是否有一种聪明的方法来 'merge' 这两个，这样订阅就可以像这样：

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

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

Answer 1

您完全可以使用 Rx.Observable.merge() 方法做到这一点。

链接：

示例（这里是 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');
        });

使用 RxJS Observable 在拖动事件上更改 css class

Using RxJS Observable to change css class on drag events

javascript

observable

rxjs