JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

div#box {
    width:200px;
    height:200px;
    background-color:orange;
    border: 1px solid black;
    cursor:pointer;
}

JavaScript

var drag_startPosition;

var box_dragOps = {	
		start : box_start_drag,
		drag  : box_dragging,
		stop : box_stop_drag
    };

$('#box').draggable(box_dragOps);


function box_start_drag(e, ui) {
    drag_startPosition = ui.position;
}

function box_dragging(e,ui) {
	
	if(e.shiftKey) {
		ui.helper.css({'top':drag_startPosition.top, 'left':drag_startPosition.left});
		console.log("box_dragging: setting position back to top="+drag_startPosition.top+" left="+drag_startPosition.left); 
		return;
    }
}

function box_stop_drag(e, ui) {
    ui.helper.css({'top':drag_startPosition.top, 'left':drag_startPosition.left});
		console.log("box_stop_drag: setting position back to top="+drag_startPosition.top+" left="+drag_startPosition.left); 
		return;
}