JSFiddle - React, Tailwind, and code Playground

by monsto

HTML

<div id="container">
    <br /><hr />
        tony romo should just play <span id="hilite"><span id="word">lego's</span></span>, because he sure as hell can't play football.
    <hr /><br />
</div>

CSS

body {margin:25px;}
.active {padding: 18px 0 18px 0; border:1px solid black; background-color:green;}
#target {display: none;position: relative; top: -18px;}
#hilite {border:1px solid black; }

JavaScript

$(function() {
    $('#word').draggable({
        axis: 'vertically',
        containment: 'parent',
        revert: 'true',
        start: function(ev, ui) {
            $("#hilite").toggleClass("active");
            //$('#target').css("display", "block");
        },
        stop: function() {
            $("#hilite").toggleClass("active");
        }
    });
});