使用RxJS Observable在拖動事件上更改css類

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」 A「懸停」類，然後卸下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'); 
     });