JSFiddle - React, Tailwind, and code Playground

HTML

<body ng-app="app">
    <button box-creator>Button</button>
</body>

CSS

.box {
  border: 1px solid black;
  background-color: white;
  width: 50px;
  height: 50px;
  text-align: center; }

button {
    cursor: pointer;
}

JavaScript

var app = angular.module("app", []);
	
    // This directive is attached to the button and makes it create a box every time the is a 'mousedown' event
	app.directive("boxCreator", function($document, $compile) {
		return {
			restrict: 'A',
			link: function($scope, $element, $attrs) {
				$element.bind("mousedown", function($event) {
					var newNode = $compile('<div class="box" drag></div>')($scope);
					
					newNode.css({
						top: $event.pageY - 25 + "px",
						left: $event.pageX - 25 + "px"
				        });
					
					angular.element($document[0].body).append(newNode);
                    // I'd like to do something like : '$(newNode).trigger("mousedown");'
                    angular.element(newNode).triggerHandler('mousedown', ["test"]);
				});
			}
		}
	});
	
    // Makes the binded element draggable
	app.directive("drag", function($document) {
	    return function(scope, element, attr) {
            console.log("link");
	        var startX = 0, startY = 0, x = event.pageX - 25, y = event.pageY - 25;

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

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

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

	        function mouseup() {
                console.log("mouseup");
	          $document.off('mousemove', mousemove);
	          $document.off('mouseup', mouseup);
	        }
	      };
	    });