[RxJS] Drag and Drop example
Improving our mouse drag event
Our mouse drag event is a little too simple. Notice that when we drag around the sprite, it always positions itself at the top-left corner of the mouse. Ideally we'd like our drag event to offset its coordinates, based on where the mouse was when the mouse down event occurred. This will make our mouse drag more closely resemble moving a real object with our finger.
Let's see if you can adjust the coordinates in the mouse drag event, based on the mousedown location on the sprite. The mouse events are sequences, and they look something like this:
spriteContainerMouseMoves = seq([ {x: 200, y: 400, offsetX: 10, offsetY: 15},,,{x: 210, y: 410, offsetX: 20, offsetY: 26},,, ])
Each item in the mouse event sequences contains an x, y value that represents that absolute location of the mouse event on the page. The moveSprite() function uses these coordinates to position the sprite. Each item in the sequence also contains a pair of offsetX and offsetY properties that indicate the position of the mouse event relative to the event target.
function(sprite, spriteContainer) { // All of the mouse event sequences look like this: // seq([ {pageX: 22, pageY: 3423, offsetX: 14, offsetY: 22} ,,, ]) var spriteMouseDowns = Observable.fromEvent(sprite, "mousedown"), spriteContainerMouseMoves = Observable.fromEvent(spriteContainer, "mousemove"), spriteContainerMouseUps = Observable.fromEvent(spriteContainer, "mouseup"), // Create a sequence that looks like this: // seq([ {pageX: 22, pageY:4080 },,,{pageX: 24, pageY: 4082},,, ]) spriteMouseDrags = // For every mouse down event on the sprite... spriteMouseDowns. concatMap(function(contactPoint) { // ...retrieve all the mouse move events on the sprite container... return spriteContainerMouseMoves. // ...until a mouse up event occurs. takeUntil(spriteContainerMouseUps). map(function(movePoint) { return { pageX: movePoint.pageX - contactPoint.offsetX, pageY: movePoint.pageY - contactPoint.offsetY }; }); }); // For each mouse drag event, move the sprite to the absolute page position. spriteMouseDrags.forEach(function(dragPoint) { sprite.style.left = dragPoint.pageX + "px"; sprite.style.top = dragPoint.pageY + "px"; }); }
相关文章
- 动态拼接Lambda表达式-表达式目录树动态构建 And Or Not True False等表达式树的扩展
- [PWA] Cache JSON Data in a React PWA with Workbox, and Display it while Offline
- [RxJS] Implement RxJS `mergeMap` through inner Observables to Subscribe and Pass Values Through
- [TypeScript] Query Properties with keyof and Lookup Types in TypeScript
- [Vue-rx] Disable Buttons While Data is Loading with RxJS and Vue.js
- [Angular2 Form] patchValue, setValue and reset() for Form
- [RxJS] Transformation operators: delay and delayWhen
- [RxJS + AngularJS] Sync Requests with RxJS and Angular
- 网络号 = IP和子网掩码的每位数AND 主机号 掩码取反与IP地址and运算
- [RxJS 6] The Catch and Rethrow RxJs Error Handling Strategy and the finalize Operator
- [PWA] Optimize Assets Delivery using preload and prefetch
- [React Native] Using the Image component and reusable styles
- [RxJS] Transformation operator: map and mapTo
- [RxJS] Toggle A Stream On And Off With RxJS
- 【OpenCV-Python】教程:4-8 ORB (Oriented FAST and Rotated BRIEF)
- 【27.91%】【codeforces 734E】Anton and Tree
- 成功解决ValueError: Data is not binary and pos_label is not specified
- HTTP:HTTP的server and client详细攻略
- Codeforces 450 C. Jzzhu and Chocolate
- 3GPP TS 29244-g30 中英文对照 | 7.1 Transmission Order and Bit Definitions
- 刷题记录:牛客NC25005Clear And Present Danger