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.
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).
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>