JSFiddle - React, Tailwind, and code Playground

by unloco

HTML

<div id="box">Drag Me!</div>

CSS

#box {
    width: 100px;
    padding: 1em;
    border: 2px solid blue;
    background-color: green;
    position: absolute;
    left: 75px;
    top: 75px;
    -moz-transform: rotate(38deg);
    -o-transform: rotate(38deg);
    -webkit-transform: rotate(38deg);
    -ms-transform: rotate(38deg);
    -sand-transform: rotate(38deg);
    transform: rotate(38deg);
    text-align: center;
    cursor: move;
}

JavaScript

$(document).ready(function(){
    // backup original handler
    var _mouseStart = $.ui.draggable.prototype._mouseStart;

    $.ui.draggable.prototype._mouseStart = function(event) {

        //remove the transform
        var transform = this.element.css('transform');
        this.element.css('transform', 'none');

        // call original handler
        var result = _mouseStart.call(this, event);

        //restore the transform
        this.element.css('transform', transform);

        return result;
    };
  
    // make it draggable
    $('#box').draggable();
});