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. win7系统cocos2dx 3.4 绑定自定义类到Lua

    Cocos2d-x 3.0开始使用bindings-generator来生成c++类的lua绑定.bindings-generator基于tolua++,通过配置tools/tolua中的ini文件以 ...

  2. 动态网页技术---JSP

    JSP(全称JavaServer Pages)是由Sun Microsystems公司倡导和许多公司参与共同创建的一种使软件开发者可以响应客户端请求,而动态生成HTML.XML或其他格式文档的Web网 ...

  3. [Jquery] js获取浏览器滚动条距离顶端的距离

    需要用js获取滚动条距离窗口顶端的距离和js获取浏览器可视化窗口的大小  一.jQuery获取的相关方法 jquery 获取滚动条高度 获取浏览器显示区域的高度 : $(window).height( ...

  4. 【网络流24题】 No.3 最小路径覆盖问题 （网络流|匈牙利算法 ->最大二分匹配）

    [题意] 给定有向图 G=(V,E).设 P 是 G 的一个简单路(顶点不相交) 的集合.如果 V 中每个顶点恰好在 P 的一条路上,则称 P 是 G 的一个路径覆盖. P 中路径可以从 V 的任何一 ...

  5. 【HDU 5456】 Matches Puzzle Game （数位DP）

    Matches Puzzle Game Problem Description As an exciting puzzle game for kids and girlfriends, the Mat ...

  6. Swift 中的静态方法继承

    Base and Derived Classes: class BaseClass{ class func staticMethod(){ println("BaseClass.static ...

  7. 最好的程序员都是行动派（成功者不是那些明知赚钱之法还要推三阻四的人。成功者知道轻重缓急，善于把握今天） good

    我相信,所有程序员都需要在下面两点之间找到一个良好的平衡: 1.把自己关在一间私密的办公室里,针对你的程序与编译器展开一次亲密对话. 2.出入公众场合,与其他人公开谈论你的程序. 关于这个话题,我已经 ...

  8. Android Animation初识

    3.0以前,android支持两种动画模式,tween animation,frame animation,在android3.0中又引入了一个新的动画系统:property animation,这三 ...

  9. 使用Common.Logging+log4net规范日志管理

    Common.Logging+(log4net/NLog/) common logging是一个通用日志接口,log4net是一个强大的具体实现,也可以用其它不同的实现,如EntLib的日志.NLog ...

  10. 使用@ResponseBody 出现错误Could not find acceptable representation

    org.springframework.web.HttpMediaTypeNotAcceptableException: Could not find acceptable representatio ...