JSFiddle - React, Tailwind, and code Playground

by azrizhaziq

HTML

<div id="Dropzone">Dropzone</div>
        <a draggable="true" href="#" id="Dragme">Drag Me</a>

CSS

*[draggable=true] {
 -moz-user-select:none;
 -khtml-user-drag: element;
 -webkit-user-drag: element;
                -khtml-user-select: none;
                -webkit-user-select: none;
                cursor: move;
            }

            #Dragme {
                background-color: #90ee90;
                border: solid 2px #006400;
                cursor: pointer;
                display: block;
                height: 70px;
                width: 70px;

            }

            #Dropzone {
                background-color: #add8e6;
                border: solid 2px darkblue;
                height: 200px;
                margin-bottom: 14px;
                padding: 7px;
                width: 300px;
            }

JavaScript

var EventUtil = {
    addHandler: function(element, type, handler) {
        if (element.addEventListener) {
            element.addEventListener(type, handler, false);
        } else if (element.attachEvent) {
            element.attachEvent("on" + type, handler);
        } else {
            element["on" + type] = handler;
        }
    },
    removeHandler: function(element, type, handler) {
        if (element.removeEventListener) {
            element.removeEventListener(type, handler, false);
        } else if (element.detachEvent) {
            element.detachEvent("on" + type, handler);
        } else {
            element["on" + type] = null;
        }
    },
    getCurrentTarget: function(e) {
        if (e.toElement) {
            return e.toElement;
        } else if (e.currentTarget) {
            return e.currentTarget;
        } else if (e.srcElement) {
            return e.srcElement;
        } else {
            return null;
        }
    },
    preventDefault: function(e) {
        e.preventDefault ? e.preventDefault() : e.returnValue = false;
    },

    /**
     * @author http://www.quirksmode.org/js/events_properties.html
     * @method getMousePosition
     * @param e
     */
    getMousePosition: function(e) {
        var posx = 0,
            posy = 0;
        if (!e) {
            e = window.event;
        }

        if (e.pageX || e.pageY) {
            posx = e.pageX;
            posy = e.pageY;
        }
        else if (e.clientX || e.clientY) {
            posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
            posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
        }

        return {
            x: posx,
            y: posy
        };
    }

};



var dm = document.getElementById('Dragme'),

    effect = 'move',

    format = 'Text';

EventUtil.addHandler(dm, 'dragstart', function(e) {

    e.dataTransfer.setData(format, 'Dragme');


   ...