削除された要素の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 --- ui.draggableは、私はあなたが使用している、私のコメントで言ったとしても、nodeListを返すため

<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

あなたは、そのidを取得し、その後selectは、第1および見つける必要があります間違った<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>