2

アイテムをゴミ箱にドロップできるウィジェットがあります。ドロップ イベントでゴミ箱にドロップされた各アイテムに一意の 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>
4

1 に答える 1

6

次のような日付オブジェクトを使用して、一意の ID を作成できます。

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

リスト項目の名前を取得するには、ドロップ イベントでアクセスできます。

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 );
    }
});
于 2012-10-02T17:18:36.020 に答える