[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";
});
时间: 2024-10-13 22:27:07

[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) clicking on a virtual object and dragging it to a different location or onto another virtual object. In general, it can be used to invoke many kinds

HTML5 CSS3 专题 : 拖放 (Drag and Drop)

本来准备写一个支持多图片拖拽上传的例子,但是为了更好的理解,先介绍一下HTML5的拖放. 拖放(Drag 和 drop)是 HTML5 标准的组成部分. 浏览器支持 Internet Explorer 9.Firefox.Opera 12.Chrome 以及 Safari 5 支持拖放. 被拖元素,dragElement : 1.添加事件:ondragstart 2.添加属性:dragable 放置元素,dropElement: 1.添加事件:ondargenter , ondragover ,

drag and drop

<!DOCTYPE HTML> <html> <head> <script type="text/javascript"> function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id); } function drop(ev) { ev.preventDef

使用HTML5本地 Drag和Drop API(native API)

人人都爱使用方便..具有互动的用户界面.并且随着智能手机的引入,用户的期望瞬间高了一大截.他们希望网站一目了然,交互动作尽人皆知.总之,他们希望你的网站使用起来超级简单. 让你的用户能在你的网站实现拖拽之类的操作吧,这会让你的网站更加具有交互性.因为人们都知道如何把东西从X拖到Y位置,知道如果把A拖到B前面的话,那么A就会先显示出来. 处理拖动,拖入之类的操作以前总是javascript的事情,开发者们早先也有自己的方法构建交互动作或者使用预制解决方案.随着HTML5 Drag和Drop API

HTML5 拖放(Drag 和 Drop)功能开发——基础实战

随着HTML5的普及度越来越高,现在写代码也遇到一些了,经过同事的点播开展了一次Dojo活动用以技术交流,我也乘此机会将HTML5的拖放功能整理了一下. 简介 拖拽(Drag/Drop)是个非常普遍的功能.在生活中,拖放物品其实是相当常见的一个动作.标榜“互联网生活尖凿狮”的程序猿也在一直试图用鼠标模拟出“手”的操作,用来给用户以更好的体验,你可以抓住一个对象,并且拖动到你想放置的区域.很多javascript都类似实现了相关的功能,例如,jQueryUI的draganddrop组件,比如<JS

『HTML5梦幻之旅』 - 仿Qt演示样例Drag and Drop Robot(换装机器人)

起源 在Qt的演示样例中看到了一个有趣的demo.截图例如以下: 这个demo的名字叫Drag and Drop Robot,简单概括而言,在这个demo中,能够把机器人四周的颜色拖动到机器人的各个部位,比方说头.臂,身躯等.然后这个部位就会变成相应的颜色.相似于换装小游戏. 上图就是经过愚下的拖动颜色使其简略换装后的样子. 当然,拖动颜色使部件变色的功能并不难实现,关键在于这个机器人是动态的,我们要研究的就恰恰是这个机器人动画是怎么做出来的. 光凭两张图片我们无法知道这个动画究竟是什么样子的,

『HTML5梦幻之旅』 - 仿Qt示例Drag and Drop Robot(换装机器人)

起源 在Qt的示例中看到了一个有趣的demo,截图如下: 这个demo的名字叫Drag and Drop Robot,简单概括而言,在这个demo中,可以把机器人四周的颜色拖动到机器人的各个部位,比如说头,臂,身躯等,然后这个部位就会变成相应的颜色,类似于换装小游戏. 上图就是经过愚下的拖动颜色使其简略换装后的样子. 当然,拖动颜色使部件变色的功能并不难实现,关键在于这个机器人是动态的,我们要研究的就恰恰是这个机器人动画是怎么做出来的. 光凭两张图片我们无法知道这个动画到底是什么样子的,大家可以

Drag and drop folder to a TextBox in C#

Last evening I came up with a requirement to drag a folder path into a TextBox in one of my Windows form applications. So I just want to share it with you all through a simple example. Drag-and-drop operations in WinForms accomplish via handling of a

原生拖拽,拖放事件(drag and drop)

原生拖拽,拖放事件(drag and drop) 拖拽,拖放事件可以通过拖拽实现数据传递,达到良好的交互效果,如:从操作系统拖拽文件实现文件选择,拖拽实现元素布局的修改. drag and drop事件流程 一个完整的drag and drop流程通常包含以下几个步骤: 设置可拖拽目标.设置属性draggable="true"实现元素的可拖拽. 监听dragstart设置拖拽数据 为拖拽操作设置反馈图标(可选) 设置允许的拖放效果,如copy,move,link 设置拖放目标,默认情况