JSFiddle - React, Tailwind, and code Playground

by Ishan Khare

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<div id = "draggable" class="ui-widget-content">
</div>

<div id = "box">
</div>

CSS

#draggable
{
    height : 50px;
    width : 50px;
    border-style : solid;
    border-radius : 100%;
    border-width : 0px;
    background-color : yellow;
    box-shadow : 0px 0px 20px 0px;
    z-index : 1;
}

#box
{
    min-height : 50px;
    position : absolute;
    min-width : 50px;
    left : 100px;
    top : 100px;
    border-style : solid;
    border-radius : 3px;
    border-width : 1px;
    box-shadow : 0px 0px 20px 0px;
}

JavaScript

$(function() {
    $("#draggable").draggable();    
    $("#draggable").on('drag', function(event,ui) {
            $('#box').html(String(ui.position.top) + ', '+ String(ui.position.left));
            var top = ui.position.top;
            var left = ui.position.left;
            create_shadow(top,left);
    })
    $("#draggable").on('create', function(event,ui) {
            $('#box').html(String(ui.position.top) + ', '+ String(ui.position.left));
            var top = ui.position.top;
            var left = ui.position.left;
            create_shadow(top,left);
    })
});

function create_shadow(top, left) {
    var h_scale = -1/10;            //if positive then light source becomes light sink
    var v_scale = -1/10;
    
    var box = document.getElementById('box');
    box = window.getComputedStyle(box);
    
    var current_left = box.getPropertyValue('left');
    current_left = Number(current_left.slice(0,current_left.length-2));    //slicing & converting "100px" to 100
    var current_top = box.getPropertyValue('top');
    current_top = Number(current_top.slice(0,current_top.length-2));
    console.log(current_left,current_top);
    
    var newShh = h_scale * (left-current_left);
    var newShv = v_scale * (top-current_top);
    
    var distance = Math.sqrt((                //determines the blur magnitude
            Math.pow(newShh,2)
            +
            Math.pow(newShv,2)
        ));
    console.log("distance ",String(distance));
    
    $('#box').css("box-shadow",String(newShh) + "px " + String(newShv) + "px " + String(distance) + "px 5px");
}