1

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>

1 Answer 1

1

With this code you can get the id attributes of the elements.

  1. Make sure to set the "tolerance" option on the elements you want to drop into,
  2. I removed your implementation of the "over" method, and added the changes to the "dropover" event handler. As far as I understand, this is how the jQuery UI documentation explains that this needs to be done.

$(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({
      tolerance: "pointer",
      over: function(){ }
  });
  
  $('#sortable2 .dropfalse').on('dropover', function(event, ui) {
      console.log("table id: " + $(this).attr("id"));
      console.log("list id: " + $(ui.draggable).attr("id"));
  });
});
<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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.