您的位置：首页 > Web前端 > JavaScript

[Javascript + rxjs] Simple drag and drop with Observables

2015-06-30 21:37 721 查看

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";
});

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航