向可放置项目添加唯一 ID

Posted 2023-04-18

【中文标题】向可放置项目添加唯一 ID

【英文标题】：Adding unique ids to droppable items

【发布时间】：2012-09-23 13:05:37

【问题描述】：

我有一个小部件，我可以在其中将物品放入垃圾桶。我希望能够在 drop 事件中为丢弃在垃圾桶中的每个项目添加一个唯一的 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>

【问题讨论】：

你正在使用"helper: "clone"" 你想将唯一ID附加到克隆项目还是列表中的原始项目？

我想要添加到 droppable 的项目，所以我想这将是克隆项目？理论上，我想要一个丢弃在垃圾箱中的物品的 ID 列表

对不起，掉落的物品，所以是克隆的

【参考方案1】：

您可以像这样使用日期对象来创建唯一 ID

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

要获取列表项的名称，可以在drop事件中访问

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 );
    
);

【讨论】：

感谢您提供如此全面的回答！我真的很感激皮姆！