Question 165043 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

“How do I get the name using attr in a jQuery dragging list?”

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();
Tags:

2

Answers


  1. 0 
    $("#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. 0

    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