zoukankan      html  css  js  c++  java
  • [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";
        });
    }
  • 相关阅读:
    php configure –help说明
    HTML5(目前)无法帮你实现的五件事多媒体
    Centos搭建PHP5.3.8+Nginx1.0.9+Mysql5.5.17
    lighttpdmod_secdownload 防盗链
    中文环境下PostgreSQL的使用
    一步一步教你安装Nginx+PHP+Mysql
    20+ 个免费和高级的 Web 视频播放器
    二十个你必须知道的SEO概念
    IO流
    sofaBoot
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5631724.html
Copyright © 2011-2022 走看看