RxJs Comment traiter les événements de document

Commencé à utiliser RxJs. Je ne peux pas trouver un moyen de contourner ce problème. J'ai un contrôle draggable:

startDrag = rx.Observable.fromEvent(myElem,'mousedown') 

Maintenant, parce que le contrôle est trop petit, les événements mousemove et mouseup doivent être au niveau du document (sinon, cela n'empêchera pas de faire glisser à moins que le curseur n'apparaisse exactement sur l'élément)

 endDrag = rx.Observable.fromEvent document,'mouseup' position = startDrag.flatMap -> rx.Observable.fromEvent document,'mousemove' .map (x)-> x.clientX .takeUntil endDrag 

Maintenant, comment puis-je "attraper" le bon moment quand il n'y a plus de traînée ( mouseup ). Vous voyez le problème avec l'abonnement à endDrag ? Il va déclencher chaque fois que vous cliquez partout, et pas seulement myElem Comment puis-je vérifier les 3 propriétés à la fois? Il ne faudrait que les document.mouseups qui sont arrivés exactement après startDrag et position

Mises à jour : je veux dire que le problème ne concerne pas le déplacement de l'élément. Cette partie est facile – abonnez-vous à la position , modifiez le css de l'élément. Mon problème est – Je dois détecter le moment de la mouseup et connaître l'élément exact qui a été traîné (il y a plusieurs éléments sur la page). Comment faire cela, je n'ai aucune idée.

J'ai adapté l' exemple de glisser-déposer fourni au poste de travail RxJS pour me comporter comme vous en avez besoin.

Changements notables:

  • mouseUp écoute le document .

  • L'élément ciblé est ajouté au retour de select .

  • Les mouvements de glisser sont traités à l'intérieur de la map et la map renvoie l'élément ciblé dans l'événement mouseDown .

  • Appelez le last après takeUntil(mouseUp) afin que l' subscribe ne soit atteint que lorsque le processus de glissement se termine (une fois par glisser).

Exemple de travail:

 function main() { var dragTarget = document.getElementById('dragTarget'); // Get the three major events var mouseup = Rx.Observable.fromEvent(document, 'mouseup'); var mousemove = Rx.Observable.fromEvent(document, 'mousemove'); var mousedown = Rx.Observable.fromEvent(dragTarget, 'mousedown'); var mousedrag = mousedown.selectMany(function(md) { // calculate offsets when mouse down var startX = md.offsetX; var startY = md.offsetY; // Calculate delta with mousemove until mouseup return mousemove.select(function(mm) { if (mm.preventDefault) mm.preventDefault(); else event.returnValue = false; return { // Include the targeted element elem: mm.target, pos: { left: mm.clientX - startX, top: mm.clientY - startY } }; }) .map(function(data) { // Update position dragTarget.style.top = data.pos.top + 'px'; dragTarget.style.left = data.pos.left + 'px'; // Just return the element return data.elem; }) .takeUntil(mouseup) .last(); }); // Here we receive the element when the drag is finished subscription = mousedrag.subscribe(function(elem) { alert('Drag ended on #' + elem.id); }); } main(); 
 #dragTarget { position: absolute; width: 20px; height: 20px; background: #0f0; } 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/4.0.7/rx.all.min.js"></script> <div id="dragTarget"></div>