I have tried many ways to get the id of dropped element in jquery UI. please help to get the value of id.

$( function() {    

    $(".draggable").draggable({
        revert: "invalid",      
        helper: "clone"     
    });

$( "#droppable2" ).droppable({
        drop: function( event, ui ) {
            var draggable = ui.draggable;           
            var dragged = draggable.clone(); 
            var currentID = ui.draggable.attr("id");/*draggable.find('id'); - returns an object. but, could not get the id. */

            alert(dragged.html());          
            alert(currentID);
            dragged.resizable();
            dragged.appendTo("#droppable2");

            //alert("open properties");
      }
    });

  } );

html of the dropped element returns and it contains the id.

---html---

<div class="ui-widget-content draggable">
                <select id='singleSelect'>
                  <option value="volvo">Volvo</option>
                  <option value="saab">Saab</option>
                  <option value="opel">Opel</option>
                  <option value="audi">Audi</option>
                </select>
            </div>

<div id='droppable2' class="ui-widget-header" height='100%'><p/></div>

I have tried many ways to get the id of dropped element in jquery UI. please help to get the value of id.

$( function() {    

    $(".draggable").draggable({
        revert: "invalid",      
        helper: "clone"     
    });

$( "#droppable2" ).droppable({
        drop: function( event, ui ) {
            var draggable = ui.draggable;           
            var dragged = draggable.clone(); 
            var currentID = ui.draggable.attr("id");/*draggable.find('id'); - returns an object. but, could not get the id. */

            alert(dragged.html());          
            alert(currentID);
            dragged.resizable();
            dragged.appendTo("#droppable2");

            //alert("open properties");
      }
    });

  } );

html of the dropped element returns and it contains the id.

---html---

<div class="ui-widget-content draggable">
                <select id='singleSelect'>
                  <option value="volvo">Volvo</option>
                  <option value="saab">Saab</option>
                  <option value="opel">Opel</option>
                  <option value="audi">Audi</option>
                </select>
            </div>

<div id='droppable2' class="ui-widget-header" height='100%'><p/></div>

• javascript
• jquery
• jquery-ui

• 1 Your markup is weird...what is this <p/>? ... in <div id='droppable2' class="ui-widget-header" height='100%'><p/></div> – Ionut Necula Commented Feb 24, 2017 at 10:59

2 Answers 2

You need to find the select first and then get its id, because ui.draggable returns a nodeList, also as I said in my ment, you are using a <p> tag wrong, corrected that a bit:

$(function() {

  $(".draggable").draggable({
    revert: "invalid",
    helper: "clone"
  });

  $("#droppable2").droppable({
    drop: function(event, ui) {
      var draggable = ui.draggable;
      var dragged = draggable.clone();
      var currentID = ui.draggable.find('select').attr('id');
      console.log(currentID);
      dragged.resizable();
      dragged.appendTo("#droppable2");

      //alert("open properties");
    }
  });

});

<link href="https://cdnjs.cloudflare./ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery./ui/1.12.1/jquery-ui.min.js"></script>

<div class="ui-widget-content draggable">
  <select id='singleSelect'>
                  <option value="volvo">Volvo</option>
                  <option value="saab">Saab</option>
                  <option value="opel">Opel</option>
                  <option value="audi">Audi</option>
                </select>
</div>

<div id='droppable2' class="ui-widget-header" height='100%'>
  <p>some paragraph</p>
</div>

I would like to share that you can simply use this code to get id/class name of a dropped element:

ui.draggable.attr("yourid/yourclass");

add this code inside your droppable function.