Question

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

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'类，然后在dragleave上删除相同的类。

我想知道是否有一种聪明的方法来“合并”这些2，这样订阅就会像：

.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在拖动事件

1 个答案: