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. xcode 升级插件失效问题

    摘要  Xcode 升级到7之后VVDocumenter-Xcode,OMColorSense,KSImageNamed等一系列的插件失效的解决办法,以及不小心误点了 Skipbundle 的解决办法 ...

  2. uva 12124 - Assemble

    最大值最小的题: 直接用二分,比较简单: 不过我的二分老是不用好.有时间总结一下! #include<cstdio> #include<map> #include<vec ...

  3. 控件构造函数需要的AOwner是TComponent，而不是Parent

    普通控件都只有一个构造函数,但是这个构造函数却强迫指定AOwner,也就是说,VCL希望将所有控件(至少是所有可视化控件)全部置于它的管理之下.至于到底显示不显示,那是另一个层次的问题.这个问题其实挺 ...

  4. 'dependencies.dependency.(groupId:artifactId:type:classifier)' must be unique

    2016-10-09 23:14:43.177 DEBUG [restartedMain][org.springframework.core.type.classreading.AnnotationA ...

  5. 深入分析iSCSI协议的应用

    深入分析iSCSI协议的应用 1 引言 快速增长的存储容量使得企业需要采用网络存储解决方案.目前网络存储技术采用的连接技术主要有光纤通道和TCP/IP.基于IP的网络存储能解决基于光纤通道的网络存储中 ...

  6. [LeetCode#281] Zigzag Iterator

    Problem: Given two 1d vectors, implement an iterator to return their elements alternately. For examp ...

  7. POJ_1631_Bridging_Signals_(动态规划,LIS)

    描述 http://poj.org/problem?id=1631 铁路左右相连,要求去掉一些边,使得剩下的边不交叉,求剩余边数的最大值. Bridging signals Time Limit: 1 ...

  8. 设计模式（c#）代码总结

    设计模式分为三种类型 创建型模式:简单工厂.工厂方法模式.抽象工厂模式.建造者模式.原型模式.单例模式 结构型模式:适配器模式.桥接模式.装饰模式.组合模式.外观模式.享元模式.代理模式. 行为型模式 ...

  9. ORA-65096: invalid common user or role name

    CREATE USER xx IDENTIFIED BY yy DEFAULT TABLESPACE USERS TEMPORARY TABLESPACE TEMP PROFILE "DEF ...

  10. HDOJ/HDU 1200 To and Fro(加密解密字符串)

    Problem Description Mo and Larry have devised a way of encrypting messages. They first decide secret ...