JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<button id="edit">Edit</button>
<ul id="sortable">
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span><a href="http://www.google.com" target="_blank">
Item 1</a>
</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span><a href="http://www.google.com" target="_blank">Item 2</a>
</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span><a href="http://www.google.com" target="_blank">Item 3</a>
</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span><a href="http://www.google.com" target="_blank">Item 4</a>
</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span><a href="http://www.google.com" target="_blank">Item 5</a>
</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span><a href="http://www.google.com" target="_blank" draggable='false'>Item 6</a>
</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span><a href="http://www.google.com" target="_blank">Item 7</a>
</li>
</ul>
CSS
#sortable {
list-style-type: none;
margin: 0;
padding: 0;
width: 60%;
}
#sortable li {
margin: 0 3px 3px 3px;
padding: 0.4em;
padding-left: 1.5em;
font-size: 1.4em;
height: 18px;
}
#sortable li span {
position: absolute;
margin-left: -1.3em;
}
JavaScript
var edit = false;
$(function () {
$("#sortable").sortable();
$("#sortable").disableSelection();
$("#sortable").sortable('disable');
$('#edit').click(function () {
if (edit == false) {
edit = true;
$('#sortable').sortable('enable');
$('a').attr('onclick', 'return false;');
} else if (edit == true) {
edit = false;
$("#sortable").sortable('disable');
$("#sortable").unbind('click.sortable');
$('a').attr('onclick', 'return true');
}
});
});