[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 ...
随机推荐
- 第 14 章 迭代器模式【Iterator Pattern】
以下内容出自:<<24种设计模式介绍与6大设计原则>> 周五下午,我正在看技术网站,第六感官发觉有人在身后,扭头一看,我C,老大站在背后,赶忙站起来, “王经理,你找我?” 我 ...
- C++的数据类型
C++的数据类型 计算机处理的对象是数据,而数据是以某种特定的形式存在的(例如整数.浮点数.字符等形式). 不同的数据之间往往还存在某些联系(例如由若干个整数组成一个整数数组).数据结构指的是数据的组 ...
- 百度预测 及 maven pom搜索地址
http://trends.baidu.com/ http://mvnrepository.com/artifact/net.sourceforge.htmlcleaner/htmlcleaner/2 ...
- C#中引用（ref关键字）参数
using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace 函数的参 ...
- poj 1273
网络流之最大流的基础题: 可以使用dinic算法和EK算法: 分别对着模板敲了一遍: dinic: #include<cstdio> #include<cstring> #in ...
- 形形色色Node工程Angular2
最近项目要用的 一些无关紧要的文件夹, demo是一些示例, dist是webpack打包后发布的代码,server是用node启动服务,typings和tsconfig是一些ts配置. npm in ...
- 在游戏中使用keybd_event的问题
转自在游戏中使用keybd_event的问题 今天发现在游戏中,keybd_event不能使用,结果发现游戏是使用directinput实现读取键盘的,关键还是扫描码的问题,我抄了一段老外的代码,经测 ...
- Nginx配置性能优化(转)
大多数的Nginx安装指南告诉你如下基础知识——通过apt-get安装,修改这里或那里的几行配置,好了,你已经有了一个Web服务器了.而且,在大多数情况下,一个常规安装的nginx对你的网站来说已经能 ...
- 两个有关Knockout自定义拓展方法fn的小技巧
Adding custom functions using "fn" 让observable自增/自减 最简单的方法是self.num(self.num() + 1), 但是这个写 ...
- 17.1.1.3 Creating a User for Replication 创建一个用于用于复制:
17.1.1.3 Creating a User for Replication 创建一个用于用于复制: 每个slave 连接到master 使用一个MySQL 用户名和密码, 因此必须有一个用户账户 ...