如何获得一个被丢弃的元素的ID - jquery UI

Question

我已经尝试了很多方法来获取jQuery UI中被丢弃元素的id。请帮助获取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返回并且它包含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> 

Answer 1

你需要找到select第一，然后获取其id，因为ui.draggable返回nodeList，也正如我在我的评论说，你正在使用一个<p>标签错了，纠正了一下：

$(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.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://code.jquery.com/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>