Home > Developer > JavaScript
Armed map concatAll with the and functions, we can create fairly complex interactions in a simple. We'll use the Observable to create a simple drag and drop example with the basic DOM elements.
<!DOCTYPE HTML><HTML><HeadLang= "en"> <MetaCharSet= "UTF-8"> <title></title> <style>body, HTML, div, span, p, button, IMG, hr{Border:0;margin:0;padding:0; } </style></Head><Body><DivID= "Parent"style= "width:300px; height:300px; background:red; position:relative;"> <DivID= "Widget"style= "width:150px; height:30px; background:blue; position:absolute; left:150px; top:150px;">Drag Me</Div></Div><Scriptsrc= "//cdnjs.cloudflare.com/ajax/libs/rxjs/2.3.22/rx.all.js"></Script><Scriptsrc= "Drag.js"></Script></Body></HTML>
varObservable =rx.observable;varParent = document.getElementById (' Parent ');varWidget = document.getElementById (' Widgets ');varWidgetmousedown = observable.fromevent (widget, ' MouseDown '));varParentmousemove = observable.fromevent (parent, ' MouseMove '));varParentmouseup = observable.fromevent (parent, ' MouseUp '));//. Map () would create a tow-d array//[1,2,3].map (function (num) {return [3,4,5];})-->> [[3,4,5],[3,4,5],[3,4,5]]vardrags =widgetmousedown. Map (function(e) {returnParentmousemove.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
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
