[Javascript + rxjs] Simple drag and drop with Observables
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的更多相关文章
- Simple drag and drop
In computer graphical user interfaces, drag-and-drop is the action of (or support for the action of) ...
- HTML5 CSS3 专题 : 拖放 （Drag and Drop）
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/31413767 本来准备写一个支持多图片拖拽上传的例子,但是为了更好的理解,先介绍 ...
- ZetCode PyQt4 tutorial Drag and Drop
#!/usr/bin/python # -*- coding: utf-8 -*- """ ZetCode PyQt4 tutorial This is a simple ...
- 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 ...
- HTML5 之拖放(drag与drop)
拖放(Drag 和 drop)是 HTML5 标准的组成部分. 拖放是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. HTML5 拖放实例 ...
- HTML5 拖放（Drag 和 Drop）功能开发——基础实战
随着HTML5的普及度越来越高,现在写代码也遇到一些了,经过同事的点播开展了一次Dojo活动用以技术交流,我也乘此机会将HTML5的拖放功能整理了一下. 简介 拖拽(Drag/Drop)是个非常普遍的 ...
- HTML5 拖放（Drag 和 Drop）详解与实例
简介 拖放是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. 先点击一个小例子:在用户开始拖动 <p> 元素时执行 JavaSc ...
- HTML5 拖放（Drag 和 Drop）详解与实例(转)
公司要开一个技术分享会,给我们出了几个简单的题去实现,其中有如何实现表格中列之间的拖拽,我知道html5中有个新方法可以实现,但是没有认真学习,现在闲了去学学,发现关于drag和drop的文章有很多, ...
- angularjs drag and drop
angular-dragula Drag and drop so simple it hurts 480 live demo angular-drag-and-drop-lists Angular d ...
随机推荐
- 告别无止境的增删改查--Java代码生成器
转自:http://www.cnblogs.com/zhuYears/archive/2012/02/29/2373491.html 告别无止境的增删改查--Java代码生成器 有感于马上要做个比较大 ...
- reviewboard搭建
reviewboard的搭建 系统:fedora 19 内核版本:3.9.5-301.fc19.x86_64 步骤 命令 备注 安装mysql # yum -y install mysql mysql ...
- ASP.Net4.0中新增23项功能
这篇文章介绍Visual Studio 2010 (ASP.Net 4.0)的新功能. 1.代码片段(Code Snippets): 代码段是预先开发的代码模板,可以节省我们对有关语法思考的时间.在V ...
- Codevs_1690_开关灯_(线段树)
描述 http://codevs.cn/problem/1690/ 一排共 n 个灯,起初都是关着的,现在有 m 次操作. 0 开头的操作代表将 l ~ r 的开关按一遍,1 开头的操作代表询问 l ...
- Apache Struts 安全措施绕过漏洞（CVE-2013-4310）
漏洞版本: Apache Group Struts < 2.3.15.2 漏洞描述: BUGTRAQ ID: 62584 CVE(CAN) ID: CVE-2013-4310 Struts2 是 ...
- centos 6.4 大容量磁盘分区步骤
首先安装分区工具 yum install parted 假设需要分区的设备为/dev/sdb 运行如下命令 parted /dev/sdb (parted) mklabel gpt #大于2TB的磁盘 ...
- DevExpress中XtraGrid控件对GridView每行的颜色设置 zt
改变行颜色 private void GridView1_RowStyle(object sender, DevExpress.XtraGrid.Views.Grid.RowStyleEventArg ...
- HDＵ－１５４０ Tunnel Warfare
Tunnel Warfare Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)To ...
- Linux学习笔记31——网络信息
一 主机数据库函数 #include <netdb.h> struct hostent *gethostbyaddr(const void *addr, //地址 size_t len, ...
- ubuntu64bits环境下搭建Opencl的环境
此文介绍 ubuntu 平台下配置 AMD/ATI Opencl 环境,我是ubuntu 12.04. 主要分为六个步骤: 1. Take a look at your hardware to mak ...