plastikaweb
8/2/2017 - 3:47 PM

JS BinRXjs - drag and drop// source https://jsbin.com/zepozin

JS BinRXjs - drag and drop// source https://jsbin.com/zepozin

index.html
content_copyfile_download
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="RXjs - drag and drop">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<style id="jsbin-css">
#draggable {
  color: white;
  line-height: 70px;
  text-align: center;
  background-color: #28f;
  height: 80px;
  width: 80px;
  position: absolute;
  cursor: move;
}
</style>
</head>
<body>
  
  <div id="draggable">drag me</div>
<script src="https://unpkg.com/@reactivex/rxjs@5.0.3/dist/global/Rx.js"></script>

<script id="jsbin-javascript">
'use strict';

var draggable = document.querySelector('#draggable');

var mouseDown$ = Rx.Observable.fromEvent(draggable, 'mousedown');
var mouseMove$ = Rx.Observable.fromEvent(draggable, 'mousemove');
var mouseUp$ = Rx.Observable.fromEvent(draggable, 'mouseup');

// 1.Detect mouse move
var mouseDrag$ = mouseDown$.flatMap(function (mdEvent) {
  var startX = mdEvent.offsetX;
  var startY = mdEvent.offsetY;

  return mouseMove$.map(function (mmEvent) {
    return {
      left: mmEvent.clientX - startX,
      top: mmEvent.clientY - startY
    };
  }).takeUntil(mouseUp$);
});

mouseDrag$.subscribe(function (pos) {
  draggable.style.top = pos.top + 'px';
  draggable.style.left = pos.left + 'px';
});
</script>


<script id="jsbin-source-css" type="text/css">#draggable {
  color: white;
  line-height: 70px;
  text-align: center;
  background-color: #28f;
  height: 80px;
  width: 80px;
  position: absolute;
  cursor: move;
}</script>

<script id="jsbin-source-javascript" type="text/javascript">const draggable = document.querySelector('#draggable');

const mouseDown$ = Rx.Observable.fromEvent(draggable, 'mousedown');
const mouseMove$ = Rx.Observable.fromEvent(draggable, 'mousemove');
const mouseUp$ = Rx.Observable.fromEvent(draggable, 'mouseup');

// 1.Detect mouse move
const mouseDrag$ = mouseDown$.flatMap( mdEvent => {
  const startX = mdEvent.offsetX;
  const startY = mdEvent.offsetY;
  
  return mouseMove$.map(mmEvent => {
    return {
      left: mmEvent.clientX - startX,
      top: mmEvent.clientY - startY
    };
  }).takeUntil(mouseUp$);
});

mouseDrag$.subscribe(pos => {
  draggable.style.top = pos.top + 'px';
  draggable.style.left = pos.left + 'px';
});
</script></body>
</html>
jsbin.zepozin.css
content_copyfile_download
#draggable {
  color: white;
  line-height: 70px;
  text-align: center;
  background-color: #28f;
  height: 80px;
  width: 80px;
  position: absolute;
  cursor: move;
}
jsbin.zepozin.js
content_copyfile_download
'use strict';

var draggable = document.querySelector('#draggable');

var mouseDown$ = Rx.Observable.fromEvent(draggable, 'mousedown');
var mouseMove$ = Rx.Observable.fromEvent(draggable, 'mousemove');
var mouseUp$ = Rx.Observable.fromEvent(draggable, 'mouseup');

// 1.Detect mouse move
var mouseDrag$ = mouseDown$.flatMap(function (mdEvent) {
  var startX = mdEvent.offsetX;
  var startY = mdEvent.offsetY;

  return mouseMove$.map(function (mmEvent) {
    return {
      left: mmEvent.clientX - startX,
      top: mmEvent.clientY - startY
    };
  }).takeUntil(mouseUp$);
});

mouseDrag$.subscribe(function (pos) {
  draggable.style.top = pos.top + 'px';
  draggable.style.left = pos.left + 'px';
});