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.

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        body, html, div, span, p, button, img, hr{

            border: 0;

            margin: 0;

            padding: 0;

        }

    </style>

</head>

<body>

<div id="parent" style="width: 300px; height: 300px; background: red; position: relative;">

    <div id="widget" style="width: 150px; height: 30px; background: blue; position: absolute; left: 150px; top: 150px;">Drag me</div>

</div>

<script src="//cdnjs.cloudflare.com/ajax/libs/rxjs/2.3.22/rx.all.js"></script>

<script src="drag.js"></script>

</body>

</html>
var Observable = Rx.Observable;

var parent = document.getElementById('parent');

var widget = document.getElementById('widget');

var widgetMouseDown = Observable.fromEvent(widget, 'mousedown');

var parentMouseMove = Observable.fromEvent(parent, 'mousemove');

var parentMouseUp = Observable.fromEvent(parent, 'mouseup');

//.map() will create a tow-d array

//[1,2,3].map(function(num){return [3,4,5];}) -->>  [[3,4,5],[3,4,5],[3,4,5]]

var drags = widgetMouseDown

    .map(function(e) {

        return parentMouseMove.takeUntil(parentMouseUp);

    })

    .concatAll(); //flat to one-d array.

drags.forEach(function( e ) {

    widget.style.left = e.clientX + "px";

    widget.style.top = e.clientY + "px";

});

[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. Spring之Spring MVC

    Spring调配半天没搞定,原来是web.xml应该放在WEB-INF的目录下,而不是webcontent目录下: java.lang.ClassNotFoundException: org.spri ...

  2. UIVIewController自定义切换效果－b

      之前介绍动画时提过UIView的转场动画,但是开发中我们碰到更多的viewController的切换,ios中常见的viewcontroller切换有四种:模态视图,导航栏控制器,UITabBar ...

  3. bzoj 1815: [Shoi2006]color 有色图 置换群

    1815: [Shoi2006]color 有色图 Time Limit: 4 Sec  Memory Limit: 64 MBSubmit: 136  Solved: 50[Submit][Stat ...

  4. 【BZOJ 2005】[Noi2010]能量采集 （容斥原理| 欧拉筛+ 分块）

    能量采集 Description 栋栋有一块长方形的地,他在地上种了一种能量植物,这种植物可以采集太阳光的能量.在这些植物采集能量后,栋栋再使用一个能量汇集机器把这些植物采集到的能量汇集到一起. 栋栋 ...

  5. 带圆角的EditText

    转载请注明出处:http://blog.csdn.net/krislight/article 1.定义一个Drawable <?xml version="1.0" encod ...

  6. Android Training精要（一）ActionBar上级菜单导航图标

    Navigation Up(ActionBar中的上级菜单导航图标) 在android 4.0中,我们需要自己维护activity之间的父子关系. 导航图标ID为android.R.id.home @ ...

  7. bzoj2004

    反正N<=10^9肯定是矩阵乘法反正p<=10肯定是状压dp首先有一个非常重要的性质是任意连续P个站,必须保证K辆车必须停在其中的一个站我们设f[i,S]表示到第i个站搞定了后,这K辆公交 ...

  8. MVC3 IIS7部署记录

    环境 系统:Win7 IIS:IIS7 开发工具:VS2010 MVC版本:ASP.NET MVC 3.0 注意 1.在部署MVC应用之前,一定要确保你的程序BIN文件夹下面是否包含 System.W ...

  9. Apache Struts 跨站脚本漏洞

    漏洞名称: Apache Struts 跨站脚本漏洞 CNNVD编号: CNNVD-201311-010 发布时间: 2013-11-04 更新时间: 2013-11-04 危害等级:    漏洞类型 ...

  10. Apache / PHP 5.x Remote Code Execution Exploit

    测试方法: 本站提供程序(方法)可能带有攻击性,仅供安全研究与教学之用,风险自负! /* Apache Magica by Kingcope */ /* gcc apache-magika.c -o ...