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: , y: , offsetX: , offsetY: },,,{x: , y: , offsetX: , offsetY: },,, ])

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] Drag and Drop example的更多相关文章

  1. [Javascript + rxjs] Simple drag and drop with Observables

    Armed with the map and concatAll functions, we can create fairly complex interactions in a simple wa ...

  2. HTML5 之拖放(drag与drop)

    拖放(Drag 和 drop)是 HTML5 标准的组成部分. 拖放是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. HTML5 拖放实例 ...

  3. 通过HTML5的Drag and Drop生成拓扑图片Base64信息

    HTML5 原生的 Drag and Drop是很不错的功能,网上使用例子较多如 http://html5demos.com/drag ,但这些例子大部分没实际用途,本文将搞个有点使用价值的例子,通过 ...

  4. 基于HTML5的Drag and Drop生成图片Base64信息

    HTML5的Drag and Drop是很不错的功能,网上使用例子较多如 http://html5demos.com/drag ,但这些例子大部分没实际用途,本文将搞个有点使用价值的例子,通过Drag ...

  5. Android 用户界面---拖放(Drag and Drop)(三)

      设计拖放操作 本节主要内容如下: 1.  如何开始拖拽: 2.  在拖拽期间如何响应事件: 3.  如何响应落下事件: 4.  如何结束拖放操作. 开始拖拽 用户使用一个拖拽手势开始拖拽,通常是在 ...

  6. Android 用户界面---拖放(Drag and Drop)(二)

      拖拽事件监听器和回调方法 View对象既可以用实现View.OnDragListener接口的拖放事件监听器,也可以用View对象的onDragEvent(DragEvent)回调方法来接收拖拽事 ...

  7. Android 用户界面---拖放(Drag and Drop)(一)

    用Android的拖放框架,能够允许用户使用图形化的拖放手势,把数据从当前布局中的一个View对象中移到另一个View对象中.这个框架包括:拖拽事件类.拖拽监听器.以及辅助的方法和类. 尽管这个框架主 ...

  8. 20 Best Drag and Drop jQuery Plugins--reference

    reference from:http://dizyne.net/20-best-drag-drop-jquery-plugins/ jQuery has done a great job repla ...

  9. HTML 5 drag and drop 简介

    Html 5 drag and drop 简介 HTML5提供了专门拖拽和拖放的API draggable属性 启用拖拽 draggable属性是否可被拖拽, 可选值: true, false, au ...

随机推荐

  1. easyui源码翻译1.32--Form(表单)

    前言 使用$.fn.form.defaults重写默认值对象下载该插件翻译源码 form提供了各种方法来操作执行表单字段,比如:ajax提交, load, clear等等.当提交表单的时候可以调用va ...

  2. linux进程间通信方式

    (1)管道(Pipe):管道可用于具有亲缘关系进程间的通信,允许一个进程和另一个与它有共同祖先的进程之间进行通信. (2)命名管道(named pipe):命名管道克服了管道没有名字的限制,因此,除具 ...

  3. poj3373Changing Digits(dp)

    链接 dfs倒着搜 返回的路径不能满足相同的数最多 借鉴了下别人的代码.. 先dp出来 再倒着标记一下 然后正回来一定可以满足了 dp保存的是最小的不相同数 #include <iostream ...

  4. URAL1018. Binary Apple Tree

    链接 简单树形DP #include <iostream> #include<cstdio> #include<cstring> #include<algor ...

  5. hadoop2.2编程:各种API

    hadoop2.2 API http://hadoop.apache.org/docs/r0.23.9/api/index.html junit API http://junit.org/javado ...

  6. BZOJ_1619_[Usaco2008_Nov]_Guarding_the_Farm_保卫牧场_(模拟+bfs)

    描述 http://www.lydsy.com/JudgeOnline/problem.php?id=1619 给出一张图每个点的高度,在一个点上安排守卫可以监视周围所有不高于于当前点的点.也就是类似 ...

  7. BZOJ_1180_[CROATIAN2009]_OTOCI_(LCT)

    描述 http://www.lydsy.com/JudgeOnline/problem.php?id=1180 三种操作: 1.询问x,y是否连通,如果不连通,建一条边x,y 2.把x节点的权值改为t ...

  8. openssl的CRYPTO_set_locking_callback

    openssl可以在多线程环境下使用,但前提是向openssl提供线程锁设施,通过CRYPTO_set_locking_callback设置. 在一些复杂软件环境环境中,可能存在多个上层模块同时使用o ...

  9. kernel_task占用大量CPU

  10. UIButton图片与文字位置调整

    1:左图右文 默认效果就行 2:左文右图 UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom]; [btn addTarget:se ...