JSFiddle - React, Tailwind, and code Playground

by teknohippy

HTML

<div data-pair-id="1" class="risk box">Risk1</div>
<div data-pair-id="1" class="risk box">Risk2</div>
<div data-pair-id="1" class="remedy box">Remedy1</div>
<div data-pair-id="1" class="remedy box">Remedy2</div>

CSS

.box { height: 100px; width: 100px; position: absolute}
.risk { background: red;}
.remedy { background: lime;}
.ui-draggable-dragging { border: 3px solid black; height: 94px; width: 94px}

JavaScript

$(document).ready(function(){
    $(".box").draggable({
        cursor: "move",
        snap: true        
    }); 
});