JSFiddle - React, Tailwind, and code Playground

HTML

<div id='drag'></div>

CSS

#drag {
background:#f00;
width:100px;
height:100px;    
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

JavaScript

var addEvent = (function () {
  if (document.addEventListener) {
    return function (el, type, fn) {
      if (el && el.nodeName || el === window) {
        el.addEventListener(type, fn, false);
      } else if (el && el.length) {
        for (var i = 0; i < el.length; i++) {
          addEvent(el[i], type, fn);
        }
      }
    };
  } else {
    return function (el, type, fn) {
      if (el && el.nodeName || el === window) {
        el.attachEvent('on' + type, function () { return fn.call(el, window.event); });
      } else if (el && el.length) {
        for (var i = 0; i < el.length; i++) {
          addEvent(el[i], type, fn);
        }
      }
    };
  }
})();

      $.fn.makeDraggable = function(){
        $(this).attr('draggable','true');
        addEvent($(this), 'dragover', function(){console.log('DRAGOVER');});
        addEvent($(this), 'dragstart', function(e) {
          //e.props.push('dataTransfer');
//           e.originalEvent.dataTransfer.effectAllowed = 'move';
//           e.originalEvent.dataTransfer.setData('text/html', 'test');
          console.log('dragstart');
        }, false);
      }
      
      $('#drag').makeDraggable();