如何获取已删除元素的 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 的删除元素 returns 并且它包含 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.draggablereturns一个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>

Answer 2

我想分享一下，您可以简单地使用此代码来获取 id/class 放置元素的名称：

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

将这段代码添加到你的 droppable 函数中。

如何获取已删除元素的 ID - jquery UI

how to get id of a dropped element - jquery UI

javascript

jquery

jquery-ui