添加獨特的ID到物品

Question

我有一個小工具，可以將物品放入垃圾箱。我希望能夠在放置事件時爲垃圾桶中放置的每個物品添加唯一的ID。我怎樣才能做到這一點，有沒有辦法讓輸出值成爲列表項的實際名稱？謝謝！下面是我的代碼：

$(function() { 
    var $gallery = $("#gallery"), 
     $trash = $("#trash"); 


    $("li", $gallery).draggable({ 
     cancel: "a.ui-icon", 
     revert: "invalid", 
     containment: $("#demo-frame").length ? "#demo-frame" : "document", // stick to demo-frame if present 
     helper: "clone", 
     cursor: "move" 
    }); 


    $trash.droppable({ 
     accept: "#gallery > li", 
     activeClass: "ui-state-highlight", 
     drop: function(event, ui) { 
      deleteImage(ui.draggable); 
     } 
    }); 

    $gallery.droppable({ 
     accept: "#trash li", 
     activeClass: "custom-state-active", 
     drop: function(event, ui) { 
      recycleImage(ui.draggable); 
     } 
    }); 

HTML

<div class="demo ui-widget ui-helper-clearfix"> 

<ul id="gallery" class="gallery ui-helper-reset ui-helper-clearfix"> 
    <li class="ui-widget-content ui-corner-tr" a href="link/to/trash/script/when/we/have/js/off"> 
     <h5 class="fpheader">Red</h5> 

    </li> 
    <li class="ui-widget-content ui-corner-tr"> 
     <h5 class="fpheader">Orange</h5> 

    </li> 
    <li class="ui-widget-content ui-corner-tr"> 
     <h5 class="fpheader"Yellow</h5> 
    </li> 
    <li class="ui-widget-content ui-corner-tr"> 
     <h5 class="fpheader">Green</h5> 
    </li> 
    <li class="ui-widget-content ui-corner-tr"> 
     <h5 class="fpheaderr">Blue</h5> 
    </li> 
    <li class="ui-widget-content ui-corner-tr"> 
     <h5 class="fpheader">Purple</h5> 
    </li> 
    <li class="ui-widget-content ui-corner-tr"> 
     <h5 class="fpheader">White</h5> 

    </li> 
</ul> 

</div> 

Answer 1

您可以通過使用像這樣

var uniqueId = new Date().getTime(); 

約會對象來獲取列表項的名稱創建一個唯一的ID，你可以在丟棄事件中訪問它

var listNameId = ui.draggable.children('.fpheader').text().toLowerCase(); 

可以從UI對象訪問克隆項目

ui.helper 

可以從UI對象

ui.draggable 

下面的示例將一個唯一的ID到克隆的項目

$trash.droppable({ 
    accept: "#gallery > li", 
    activeClass: "ui-state-highlight", 
    drop: function(event, ui) { 
     // unique ID based on ID 
     var uniqueId = new Date().getTime(); 
     // set unique ID to cloned list item 
     ui.helper.attr('id', uniqueId); 
     deleteImage(ui.draggable); 
    } 
}); 

訪問原始項目

下面的示例向原始項目添加列表名稱

$trash.droppable({ 
    accept: "#gallery > li", 
    activeClass: "ui-state-highlight", 
    drop: function(event, ui) { 
     // list item text, i.e "white" 
     var listNameId = ui.draggable.children('.fpheader').text().toLowerCase(); 
     // set list name ID to orriginal list item 
     ui.draggable.attr('id', listNameId); 
     deleteImage(ui.draggable); 
    } 
});