Armed with the map and concatAll functions, we can create fairly complex interactions in a simple way. We will use Observable to create a simple drag and drop example with basic DOM elements.

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         body, html, div, span, p, button, img, hr{
  8.             border: 0;
  9.             margin: 0;
  10.             padding: 0;
  11.         }
  12.     </style>
  13. </head>
  14. <body>
  15.  
  16. <div id="parent" style="width: 300px; height: 300px; background: red; position: relative;">
  17.     <div id="widget" style="width: 150px; height: 30px; background: blue; position: absolute; left: 150px; top: 150px;">Drag me</div>
  18. </div>
  19.  
  20. <script src="//cdnjs.cloudflare.com/ajax/libs/rxjs/2.3.22/rx.all.js"></script>
  21. <script src="drag.js"></script>
  22. </body>
  23. </html>
  1. var Observable = Rx.Observable;
  2.  
  3. var parent = document.getElementById('parent');
  4. var widget = document.getElementById('widget');
  5.  
  6. var widgetMouseDown = Observable.fromEvent(widget, 'mousedown');
  7. var parentMouseMove = Observable.fromEvent(parent, 'mousemove');
  8. var parentMouseUp = Observable.fromEvent(parent, 'mouseup');
  9.  
  10. //.map() will create a tow-d array
  11. //[1,2,3].map(function(num){return [3,4,5];}) -->>  [[3,4,5],[3,4,5],[3,4,5]]
  12. var drags = widgetMouseDown
  13.     .map(function(e) {
  14.         return parentMouseMove.takeUntil(parentMouseUp);
  15.     })
  16.     .concatAll(); //flat to one-d array.
  17.  
  18. drags.forEach(function( e ) {
  19.     widget.style.left = e.clientX + "px";
  20.     widget.style.top = e.clientY + "px";
  21. });

[Javascript + rxjs] Simple drag and drop with Observables的更多相关文章

  1. Simple drag and drop

    In computer graphical user interfaces, drag-and-drop is the action of (or support for the action of) ...

  2. HTML5 CSS3 专题 : 拖放 （Drag and Drop）

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/31413767 本来准备写一个支持多图片拖拽上传的例子,但是为了更好的理解,先介绍 ...

  3. ZetCode PyQt4 tutorial Drag and Drop

    #!/usr/bin/python # -*- coding: utf-8 -*- """ ZetCode PyQt4 tutorial This is a simple ...

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

  5. HTML5 之拖放(drag与drop)

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

  6. HTML5 拖放（Drag 和 Drop）功能开发——基础实战

    随着HTML5的普及度越来越高,现在写代码也遇到一些了,经过同事的点播开展了一次Dojo活动用以技术交流,我也乘此机会将HTML5的拖放功能整理了一下. 简介 拖拽(Drag/Drop)是个非常普遍的 ...

  7. HTML5 拖放（Drag 和 Drop）详解与实例

    简介 拖放是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. 先点击一个小例子:在用户开始拖动 <p> 元素时执行 JavaSc ...

  8. HTML5 拖放（Drag 和 Drop）详解与实例(转)

    公司要开一个技术分享会,给我们出了几个简单的题去实现,其中有如何实现表格中列之间的拖拽,我知道html5中有个新方法可以实现,但是没有认真学习,现在闲了去学学,发现关于drag和drop的文章有很多, ...

  9. angularjs drag and drop

    angular-dragula Drag and drop so simple it hurts 480 live demo angular-drag-and-drop-lists Angular d ...

随机推荐

  1. 4071: [Apio2015]巴邻旁之桥

    Description 一条东西走向的穆西河将巴邻旁市一分为二,分割成了区域 A 和区域 B. 每一块区域沿着河岸都建了恰好 1000000001 栋的建筑,每条岸边的建筑都从 0 编号到 10000 ...

  2. java 集合（二）

    1.练习题 如果输入的字符里有非英语字母的,不给于执行

  3. hdu 4452

    今天模拟赛的一个模拟题: 每次看到这种题就感觉很繁琐: 这次静下心来写写,感觉还不错!就是很多错误,浪费了一点时间: 代码: #include<cstdio> #include<cs ...

  4. tornado异步请求的理解（转）

    tornado异步请求的理解 http://www.kankanews.com/ICkengine/archives/88953.shtml 官网第一段话: Tornado is a Python w ...

  5. 17.2.1 Replication Implementation Details 复制实现细节:

    17.2 Replication Implementation 复制是基于master server 跟踪所有改变到他的数据库(更新,删除等等)在它的binary log. binary log 作为 ...

  6. 转：二十、java的抽象类

    http://blog.csdn.net/liujun13579/article/details/7737667 现实世界中,人们表征世界时,会把现实世界中的很多类具有相同特征的事物归为一个抽象类.比 ...

  7. WordPress WP-Realty插件‘listing_id’参数SQL注入漏洞

    漏洞名称: WordPress WP-Realty插件‘listing_id’参数SQL注入漏洞 CNNVD编号: CNNVD-201310-499 发布时间: 2013-10-23 更新时间: 20 ...

  8. UITextView 动态高度计算(iOS7版)

    NSDictionary *attrsDictionary = [NSDictionarydictionaryWithObject:[UIFontsystemFontOfSize:kCellConte ...

  9. Unity3D之资源问题处理

    你做的东西如果是100%完整版 你就用 流媒体资源 Streaming Assets http://game.ceeger.com/Manual/StreamingAssets.html 你如果是类微 ...

  10. 水题：HDU 5119 Happy Matt Friends

    Matt has N friends. They are playing a game together.Each of Matt's friends has a magic number. In t ...