JSFiddle - React, Tailwind, and code Playground

HTML

<table id="MySpecialTable">
    <tbody>
        <tr><td> Hello 1</td></tr>
        <tr><td> Hello 2</td></tr>
        <tr><td> Hello 3</td></tr>
        <tr><td> Hello 4</td></tr>
        <tr><td> Hello 5</td></tr>
        <tr><td> Hello 6</td></tr>
        
    </tbody>
</table>
<br />

<div id='textDiv'>Log</div>
<div id='mousePos'>Log</div>

CSS

#MySpecialTable {
    width:400px;
    margin: 0 auto;
    border:solid;
    cursor: pointer;
    border-width:1px;
    unselectable:on;
    user-select:none;
    MozUserSelect:none;
    
}
#MySpecialTable tr td{
    height:20px;
    line-height:20px;
    font-size:15px;
    padding-left:10px;
    color:black;
    font-family: Arial;
}
#MySpecialTable tr:nth-child(even) td{
    background-color:#DDD;
}
#MySpecialTable tr:nth-child(odd) td{
    background-color:#EFEFEF;
}

JavaScript

var selected;
$(document).on("mousedown","#MySpecialTable tr",function(e){
    e.preventDefault();//stop the text selection;
   $("#textDiv").text(this.textContent); 
    selected = $(this);
    selected.find("td").css("background-color","#999");
});
$(document).on("mouseup",function(){
    $("#textDiv").text("Left "+selected.text()); 
    selected.find("td").css("background-color","");
    selected = null;
});
$(document).on("mousemove",function(e){
    if(selected !=null){// got an element selected
        if($("#MySpecialTable").has(e.target).length > 0){ //in the table
            var el = $(e.target).closest("tr");//the tr element we're on
            el.before(selected);// replace the elements
        }
    }else{
        $("#mousePos").text("NOT SELECTED");
    }
});

$("#MySpecialTable").on('selectstart', false);//Don't let the user select the table