Warden.js

Drag & Drop

Simple drag'n'drop with coordinate observing

Implementation

Streams

var downs = circle.stream('mousedown'),
  ups = document.stream('mouseup'),
  moves = document.stream('mousemove', circle);

var position = {
  x: '.clientX',
  y: '.clientY'
}

var drags = moves
  .after(downs)
  .map(position)
  .map(function(coors){
  /* Math logic to find absolute position of object */
  })

Logic

drags.toggleOn(ups, false);
drags.toggleOn(downs, true);
        

Side effects

drags.interpolate("Current position: (X:{{x}}, Y:{{y}})").bindTo(DOMelement, 'innerHTML');

drags.listen(function(coors){
  this.style.top = coors.y + "px";
  this.style.left = coors.x + "px";
});