Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/rxjs/2.3.22/rx.all.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
    <div id="parent" style="width:200px; height:200px; background-color:black">
      <div id="widget" style="position:absolute;width:150px;background-color:orange;color:white">DraG-Orange is new black</div>
  </div>
</body>
</html>
 
var Observable = Rx.Observable;
var parent = document.getElementById("parent");
var widget = document.getElementById("widget");
var mouseDowns = Observable.fromEvent(widget, "mousedown");
var parentMouseMoves = Observable.fromEvent(parent, "mousemove");
var parentMouseUps = Observable.fromEvent(parent, "mouseup");
/*
var filteredShownames = 
  IMDBShows.
    map(function(shows){
      return shows.showlist.filter(function(show) {
        return show.rating >= 9.00;
      });
    }).concatAll();
filteredShownames.forEach(function(name) {
  console.log(name);
});
*/
var drags = 
  mouseDowns.
    map(function(e) {
      return parentMouseMoves.
        takeUntil(parentMouseUps);
    }).
    concatAll();
var subscription = 
  drags.forEach(
    function onNext(e) {
      widget.style.left = e.clientX + "px";
      widget.style.top = e.clientY + "px";
    },
    function onError(error) {
      console.log('error');
    },
    function onCompleted() {
      
    });
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
amitjain1307pro
0viewers