[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"; }); }
相关文章
- [RxJS] Use filter and partition for conditional logic
- [TypeScript] Combine Template Literal Types usage, Extract and default Generic type
- [Vue-rx] Watch Vue.js v-models as Observable with $watchAsObservable and RxJS
- [RxJS] AsyncSubject and ReplaySubject - Learn the Differences
- [HTML5] Inlining images with SVG and data URIs
- [Recompose] Compose Streams of React Props with Recompose’s compose and RxJS
- [RxJS] RefCount: automatically starting and stopping an execution
- [RxJS] Toggle A Stream On And Off With RxJS
- [Kotlin] Getter and Setter
- [ARIA] Add aria-expanded to add semantic value and styling
- [Vue-rx] Cache Remote Data Requests with RxJS and Vue.js
- [RxJS 6] The Catch and Rethrow RxJs Error Handling Strategy and the finalize Operator
- [Recompose] Handle React Events as Streams with RxJS and Recompose
- [RxJS] Filtering operators: distinct and distinctUntilChanged
- [RxJS] Transformation operators: delay and delayWhen
- [RxJS] Aggregating Streams With Reduce And Scan using RxJS
- [Javascript + rxjs] Simple drag and drop with Observables
- Atitit jpql ast总结v2 t025.docx 目录 1.1. 多select字段 1 1.2. 多个and条件 (ok) 2 1.3. Select 字段函数(聚合等) 2 1.4. [
- Atitit Mysql查询优化器 存取类型 范围存取类型 索引存取类型 AND or的分析
- 【34.54%】【codeforces 675E】Trains and Statistic
- Fiori Elements - list report.xml layout and fragment xml load
- Add-in Express for Office and Delphi VCL 10.4
- 深入理解C/C++ [Deep C (and C++)] (2)
- 整洁面向对象分层架构 (Clean Object-Oriented and Layered Architecture)
- Altium Designer,电气规则检查报错:(0.198mm < 0.2mm) Between Region (0 hole(s)) Top Layer And Pad U6-44(-2.75m