JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="testApp">
    <div class="topPull" draggable >
            <button class="button-icon">Hi</button>
    </div>
</div>

JavaScript

angular.module('testApp', [])

angular.module('testApp')
.directive('draggable', function () {
  return function(scope, element) {
        // this gives us the native JS object
        var el = element[0];
        console.log(el)
        el.draggable = true;

        el.addEventListener(
            'dragstart',
            function(e) {
                e.dataTransfer.effectAllowed = 'move';
               // e.dataTransfer.setData('Text', this.id);
                this.classList.add('drag');
                return false;
            },
            false
        );

        el.addEventListener(
            'dragend',
            function(e) {
                this.classList.remove('drag');
                return false;
            },
            false
        );
    }
})