JSFiddle - React, Tailwind, and code Playground

testing angular directives

by ikaruss

HTML

<div ng-app="docsSimpleDirective">
    <position draggable left="100" top="100" color="red"></position>
    <position draggable left="150" top="100" color="yellow"></position>
    <position draggable left="200" top="100" color="lightblue"></position>
    <position draggable left="250" top="100" color="lightgreen"></position>
    <position draggable left="300" top="100" color="blue"></position>
</div>

JavaScript

angular.module('docsSimpleDirective', [])
  .directive('position', function() {
    return {
      restrict: 'E',
      link: function(scope, element, attrs) {
        element.css({
          'background-color': attrs.color,
          'display': 'block',
          'width': '40px',
          'height': '40px',
          'position': 'absolute',
          'left': attrs.left+'px',
          'top': attrs.top+'px'
        });
      }
    };
  })
  .directive('draggable', function($document) {
    return function(scope, element, attrs) {
      var startX = 0, startY = 0;
      var x = parseInt(element.css('left').split('p')[0]);
      var y = parseInt(element.css('top').split('p')[0]);

      element.css({
        cursor: 'pointer'
      });

      element.on('mousedown', function(event) {
        event.preventDefault();
        startX = event.pageX - x;
        startY = event.pageY - y;
        $document.on('mousemove', mousemove);
        $document.on('mouseup', mouseup);
      });

      function mousemove(event) {
        y = event.pageY - startY;
        x = event.pageX - startX;
        element.css({
          top: y + 'px',
          left:  x + 'px'
        });
      }

      function mouseup() {
        $document.unbind('mousemove', mousemove);
        $document.unbind('mouseup', mouseup);
      }
    }
  });