Drag and drop

by fido3993

HTML

Right now i have 2 table this table class A can be drag to table class UI

<br><br>

<table class="A" id="diagram">
    <tbody id="sortable2">
   <tr class="new-item"> 
       <td>1</td>
   </tr>
   <tr class="new-item"> 
       <td>2</td>
   </tr>
   <tr class="new-item"> 
       <td>3</td>
   </tr>
    </tbody>
</table>


<br><br>
    
<table class="UI" id="diagram1" >
    <tbody id="sortable">

     </tbody>
</table>

 <br><br>   
    
<button id="button1">Clear selected row in Table class UI</button>

CSS

table{
    border: 1px solid black;
    width:200px;
}

tbody tr.test2 td {
    background: rgba(20, 111, 186, 0.38);
}

JavaScript

/**Sorting Statement**/

$("#sortable").sortable({
    revert: true,
    stop: function(event, ui) {
        if (ui.item.hasClass("new-item")) {
            // This is a new item

        }
    }
});
$(".new-item").draggable({
    connectToSortable: "#sortable",
    helper: "clone",
    revert: "invalid",
    zIndex: 10000
});

/** Highlight Statement **/
$('tbody').on("click","tr",function(e) {
    $('tbody tr').not(this).removeClass('test2');
    $(this).toggleClass('test2');
});

$("#button1").on("click",function(e){
	$("table:not(.A) .test2").remove();
});