I've got jQuery sortable list and table. I would like to drag one item from the list and hover it over to the row to compare their values using ID's, so if value of the list item and value on the hovered row are the same then remove list item; if values are different then put this list item back to the list.
How to get ID's of the chosen list item and the row I'm hovering this item to?
This is what I've got so far:
$(function() {
var $dropfalse = $("tr.dropfalse"),
itemId,
isvalid = false;
$("ul.droptrue").sortable({
connectWith: "ul",
start: function(event, ui) {
$dropfalse.removeClass("disabled");
itemId = ui.item.attr("id"); // Get id of source item
},
stop: function(){
$dropfalse.addClass("disabled");
}
});
$("tr.dropfalse").sortable({
connectWith: "tr",
dropOnEmpty: false,
cancel:".disabled",
receive: function(event, ui) {
console.log(isvalid);
if(!isvalid){
$(ui.sender).sortable('cancel');
isvalid = false;
}
}
});
$("#sortable1, #sortable2").disableSelection();
$dropfalse.addClass("disabled");
$('#sortable2 .dropfalse').droppable({
over: function(){
console.log(itemId, $(this).attr("id"));
isvalid = true;
}
});
});
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/ui-lightness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<ul id="sortable1" class="droptrue">
<li id="test1" class="ui-state-default"><label>Item 1</label></li>
<li id="test2" class="ui-state-default"><label>Item 2</label></li>
<li id="test3" class="ui-state-default"><label>Item 3</label></li>
</ul>
<table id="sortable2" class="disabled">
<tr id="test4" class="dropfalse"><td class="ui-state-highlight">Item 4</td></tr>
<tr id="test5" class="dropfalse"><td class="ui-state-highlight">Item 5</td></tr>
<tr id="test6" class="dropfalse"><td class="ui-state-highlight">Item 6</td></tr>
</table>