skip to Main Content

Hi I have two lists can drag and drop to each other. I need to get the value of the name on the dropping item (source selection). I only can get the source list id. Would you tell me.
Let say I move the "Item 2" from sortbale1 to sortable2. I want to get the value of the name is F.

There is my html:

<ul id="sortable1" class="connectedSortable">
   <li class="ui-state-default" name="B>Item 1</li>
   <li class="ui-state-default" name="F">Item 2</li>
   <li class="ui-state-default" name="X">Item 3</li>
   <li class="ui-state-default" name="G">Item 4</li>
   <li class="ui-state-default" name="H">Item 5</li>
</ul>

<ul id="sortable2" class="connectedSortable">
  <li class="ui-state-highlight" name="a">Item A</li>
  <li class="ui-state-highlight" name="b">Item B</li>
  <li class="ui-state-highlight" name="c">Item C</li>
  <li class="ui-state-highlight" name="d">Item D</li>
  <li class="ui-state-highlight" name="e">Item E</li>
</ul>

There are script:

$("#sortable1, #sortable2").sortable({
          connectWith: ".connectedSortable",
          receive: function (event, ui) {                  
              var sourceIndex = ui.sender.children('option:selected').index();     
    //let name = ui.sender.children('option:selected').attr('name');   doesn't work         
          },
          update: function (event, ui) {                  
          }
      }).disableSelection();

2

Answers


  1. $("#sortable1, #sortable2").sortable({
          connectWith: ".connectedSortable",
          receive: function (event, ui) {                  
              var sourceIndex = ui.sender.children('option:selected').index();     
              let name = ui.item.attr('name');        
          },
          update: function (event, ui) {                  
          }
    }).disableSelection();
    

    please use ui.item to refer to the current dragged element as given in the documentation https://api.jqueryui.com/sortable/#event-receive
    you can also console.log(ui) and observe all the content once.

    Login or Signup to reply.
  2. This is how I redefined the receive function to show the element being dropped and to which list:

    receive: function(event, ui) {
        var sourceIndex = ui.item.attr("name");
        var to = $(event.target).attr("id");
        console.log(`dropped ${sourceIndex} to ${to}`);
      }
    

    Demo:

    $("#sortable1, #sortable2").sortable({
      connectWith: ".connectedSortable",
      receive: function(event, ui) {
        var sourceIndex = ui.item.attr("name");
        var to = $(event.target).attr("id");
        console.log(`dropped ${sourceIndex} to ${to}`);
      },
      update: function(event, ui) {}
    }).disableSelection();
    <link href="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.13.0/themes/black-tie/jquery-ui.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
    
    <ul id="sortable1" class="connectedSortable">
      <li class="ui-state-default" name="B">Item 1</li>
      <li class="ui-state-default" name="F">Item 2</li>
      <li class="ui-state-default" name="X">Item 3</li>
      <li class="ui-state-default" name="G">Item 4</li>
      <li class="ui-state-default" name="H">Item 5</li>
    </ul>
    
    <ul id="sortable2" class="connectedSortable">
      <li class="ui-state-highlight" name="a">Item A</li>
      <li class="ui-state-highlight" name="b">Item B</li>
      <li class="ui-state-highlight" name="c">Item C</li>
      <li class="ui-state-highlight" name="d">Item D</li>
      <li class="ui-state-highlight" name="e">Item E</li>
    </ul>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search