javascript - 如何获取已删除元素的 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>