JSFiddle - React, Tailwind, and code Playground

by Shubham Tripathi

HTML

<body ng-app="dragModule"> 
  <div ng-controller="myController"> 
    <span my-draggable start-x="startX" start-y="startY" x="x" y="y" id="drag">Drag Me({{x}},{{y}})</span>
  </div>
</body>

JavaScript

angular.module('dragModule', [])
  .controller('myController', ['$scope', function($scope){
    $scope.startX=0;
    $scope.startY=0;
    $scope.x=0;
    $scope.y=0;
  }])
  .directive('myDraggable', ['$document', function($document) {
    return {
      scope:{
        startX: '=', 
        startY: '=', 
        x: '=',
        y: '='
      },
      link: function(scope, element, attr) {  
        element.css({
         position: 'relative',
         border: '1px solid red',
         backgroundColor: 'lightgrey',
         cursor: 'pointer'
        });

        element.on('mousedown', function(event) {
          // Prevent default dragging of selected content
          event.preventDefault();
          scope.startX = event.pageX - scope.x;
          scope.startY = event.pageY - scope.y;
          $document.on('mousemove', mousemove);
          $document.on('mouseup', mouseup);
          scope.$apply();
        });
 
        function mousemove(event) {
          scope.y = event.pageY - scope.startY;
          scope.x = event.pageX - scope.startX;
          element.css({
            top: scope.y + 'px',
            left: scope.x + 'px'
          });
          scope.$apply();
        }

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