Recently, I had been using a lot of RxJS, and I find it really useful not just to do asynchronous programming, but also for building User Interface!

Drag and Drop with RxJS

I created a drag and drop that works on both mouse click (Desktop) and touch (Phone) with less than 60 lines of codes and RxJS is the only dependency! Code hosted at CodePen

Here's the code breakdown

First, get the RxJS 6 CDN from https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.2.2/rxjs.umd.min.js and import necessary functions.

const { fromEvent, interval } = rxjs;
const { takeUntil, mergeMap, flatMap, map, merge } = rxjs.operators;

Create a reference of the drag and drop target.

// dom element
const target = document.querySelector(".box");

Then, bind both mouse and touch event together (since both used very similar DOM API).

// event
const mousemove = fromEvent(document, "mousemove").pipe(
  merge(fromEvent(document, "touchmove"))
);
const mouseup = fromEvent(target, "mouseup").pipe(
  merge(fromEvent(target, "touchend"))
);
const mousedown = fromEvent(target, "mousedown").pipe(
  merge(fromEvent(target, "touchstart"))
);

Then, Create an observable called drag, which is a combination of mousedown/touchdown, mousemove/touchmove, mouseup/touchup. The data grab will take until mouseup/touchup operation is done after mousedown/touchdown and mousemove/touchmove. if (md.type.startsWith("mouse")) is used to check whether the operation is mouse or touch since both have different structure of api on the x and y location.

// create drag observerble
const drag = mousedown.pipe(
  flatMap(md => {
    let startX, startY, startLeft, startTop;

    if (md.type.startsWith("mouse")) {
      startX = md.clientX + window.scrollX;
      startY = md.clientY + window.scrollY;
      startLeft = parseInt(md.target.style.left, 10) || 0;
      startTop = parseInt(md.target.style.top, 10) || 0;
    } else {
      startX = md.touches[0].clientX + window.scrollX;
      startY = md.touches[0].clientY + window.scrollY;
      startLeft = parseInt(md.target.style.left, 10) || 0;
      startTop = parseInt(md.target.style.top, 10) || 0;
    }

    return mousemove.pipe(
      map(mm => {
        if (mm.type.startsWith("mouse")) {
          return {
            left: startLeft + mm.x - startX,
            top: startTop + mm.y - startY
          };
        } else {
          return {
            left: startLeft + mm.touches[0].clientX - startX,
            top: startTop + mm.touches[0].clientY - startY
          };
        }
      }),
      takeUntil(mouseup)
    );
  })
);

Once the observable is created, we need to subscribe to it, so that it can update the location of the image.

// subscription
const subscription = drag.subscribe(pos => {
  target.style.top = pos.top + "px";
  target.style.left = pos.left + "px";
});

Then it works like a charm!

Try it yourself!