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. 关于OJ的输入和输出(转)

    ACM竞赛之输入输出以下内容来源于互联网.在ACM程序设计竞赛中,一道题目的所有测试数据是放在一个文本文件中,选手将一道题目的程序提交给评判系统运行,程序从该文件中读取测试数据,再把运行结果输出到另一 ...

  2. 安装plsql

    sqlplus能登录,服务器.网络.tns配置应该都是好的,应该就是plsql本身的问题 问下安装路径在哪? 注意安装路径中不能有括号,不要安装在C:\Program Files (x86)目录下面

  3. REST内容协商注解

    @Produces注解: 用于定义方法的响应实体的数据类型.可以定义一个或多个,同时可以为每种类型定义质量因素,质量因素取值范围从0--1的小数值,默认为1. 示例: @Path("conn ...

  4. 根据WSDL生成代理类方式（2）

    运行开发人员工具提示 输入命令行svcutil http://localhost:8080/Test/TestClassPort?wsdl

  5. 基于Visual C++6.0的DLL编程实现

    整理自基于Visual C++6.0的DLL编程实现 本文通过通俗易懂的方式,全面介绍了动态链接库的概念.动态链接库的创建和动态链接库的链接,并给出个简单明了的例子,相信读者看了本文后,能够创建自己的 ...

  6. leetcode面试准备:Minimum Size Subarray Sum

    leetcode面试准备:Minimum Size Subarray Sum 1 题目 Given an array of n positive integers and a positive int ...

  7. [LeetCode#250] Count Univalue Subtrees

    Problem: Given a binary tree, count the number of uni-value subtrees. A Uni-value subtree means all ...

  8. Apache mod_fcgid fcgid_header_bucket_read函数缓冲区溢出漏洞

    漏洞名称: Apache mod_fcgid fcgid_header_bucket_read函数缓冲区溢出漏洞 CNNVD编号: CNNVD-201310-455 发布时间: 2013-10-21 ...

  9. 【转】Android bluetooth介绍（三）： 蓝牙扫描(scan)设备分析

    原文网址:http://blog.csdn.net/xubin341719/article/details/38584469 关键词:蓝牙blueZ  A2DP.SINK.sink_connect.s ...

  10. Android webview中cookie增加/修改

    最近项目需求中,需要满足往webview传递cookie,而且cookie需要增加修改: public class MainActivity extends Activity { private We ...