JSFiddle - React, Tailwind, and code Playground

by San-Kai Liao

HTML

<div></div>
deviationTop:<span id="devLeft"></span>
deviationLeft:<span id="devTop"></span>

CSS

div {
    left:100px;
    top: 100px;
    width: 100px;
    height: 100px;  
    background-color: green;
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
}

JavaScript

$(document).ready(function(){
    $('div').draggable({
            drag: function(event, ui) {
                var cssLeft = $(this).css('left').replace(/px/gi, "");
                var cssTop = $(this).css('top').replace(/px/gi, "");
                cssLeft =(cssLeft == 'auto')?0:cssLeft;
                cssTop =(cssTop == 'auto')?0:cssTop;
                var devLeft = cssLeft - $(this).position().left;
                var devTop = cssTop - $(this).position().top;
                $('#devTop').text(devTop);
                $('#devLeft').text(devLeft);
                //console.log('deviationLeft:'+devLeft+'deviationTop:'+devTop);               
            }
    });    
});