JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.21/themes/base/jquery-ui.css">
<div id="wrapper">
    <ul>
        <li id="test1newtest" class="myLi disable" ><font color="red">Li Point1</font></li>
        <li id="test2" class="myLi" >Li Point2</li>
        <li id="test3" class="myLi" >Li Point3</li>
    </ul>
</div>

<button id="enable" type="button">enable 'Li Point1'</button>

CSS

#wrapper {
    position: relative;
    height: 300px;
    border: 1px solid black;
}

JavaScript

// set draggable functionality to all li tags
$('.myLi').draggable();
// disable all li tags which have the class disable
$('.myLi.disable').draggable('disable');

// when button clicked ...
$('#enable').click(function() {
    // also enable li tag with id test1
    $('#test1newtest').draggable('enable');
});