[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 ...
随机推荐
- Docker入门
-----------------------------------------Docker入门教程(一)介绍Docker入门教程(二)命令Docker入门教程(三)DockerFileDocker ...
- Longest common prefix | leetcode
Write a function to find the longest common prefix string amongst an array of strings. 思路:要去是寻找字符串ve ...
- KEIL4.12中添加ULINK2的支持
转载自:http://www.amobbs.com/thread-4767650-1-1.html 如果你用KEIL4.12,但却没有Ulink2下载器,只有早先用的Ulink下载器,那么你按照下面三 ...
- leetcode第三题Longest Substring Without Repeating Characters java
Longest Substring Without Repeating Characters Given a string, find the length of the longest substr ...
- Java多线程初学者指南（9）：为什么要进行数据同步
Java中的变量分为两类:局部变量和类变量.局部变量是指在方法内定义的变量,如在run方法中定义的变量.对于这些变量来说,并不存在线程之间共享的问题.因此,它们不需要进行数据同步.类变量是在类中定义的 ...
- 盘点 PHP 和 ASP.NET 的10大对比！
[编者按]本文主要针对开源 PHP 和非开源的 ASP.NET 在性能.成本.可扩展性,技术支持和复杂性等方面进行比较. 在网上论坛,总是有成百上千的文章和帖子在讨论 PHP 和 ASP.NET,究竟 ...
- 【UVA 1411】 Ants （KM）
Young naturalist Bill studies ants in school. His ants feed onplant-louses that live on apple trees. ...
- QWidget与HWND的互相转换
QWidget与HWND的互相转换 在编写Windows的应用程序时,我们有时不可避免地要与Windows平台固有的Win32 API打交道,但是Win32 API里面常常用到的HWND等诸多句柄QT ...
- Unity3D之多个fbx导入场景, 合并多个动画
1:先导入到合适的文件夹, Unity自动刷新, 生成相应的文件. 2:在Project视图中选中单个fbx, 在Inspector中选择"Rig", 更改"Animat ...
- StringHelpers
public class StringHelpers { public const char QUERY_STRING_DELIMITER = '&'; private static Rijn ...