5

私はここにこのコードを持っています。ただし、2つの問題があります。

  1. receive 関数で、sortable にドロップされたばかりの要素を取得するにはどうすればよいでしょうか? 新しいものをドロップするために使用されたものではなく、実際にリストにドロップされたものですか?

  2. それが見つからなかったので、drop() 関数を使用することにしましたが、なぜその関数が 2 回呼び出されるのでしょうか?! 私はそれをしたくない ！

    $( "#sortable" ).droppable({

    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    drop: function( event, ui ) {
        $(ui.draggable).editable(function(value, settings) { 
             return(value);
             },{
             tooltip     : "Click to edit"
          });
    }
}).sortable({

    revert: true,
    receive: function(event, ui) {
        $(this).children("li").each(function(index) {
            $(this).attr("id", "content-" + index);
            });
    }

});
4

1 に答える 1

0

気になったので、ちょっと遊んでみました。

プレイ中のドロップ可能でのテストでは、「受信」イベントがまったく発生しませんでした。それを考えると、私はあなたのコードを見て、新しくドロップされた id を設定したいようです。それで、私はこれをまとめました: http://jsfiddle.net/ER5Jd/ - それを使用して、ID を追加し、最後のリスト項目 ID をリストする動作を確認します。
ソートすると、ソート後にリストの新しい最後のものが表示されます。お役に立てば幸いです。注: 「ドロップ」の ui.helper は、画面上でドラッグするヘルパー アイテム (ドラッグ可能なクローン セット) ですが、実際のクローンはドラッグ可能なものからのものです。

私のマークアップ:

<ul id='firstOne'>First
    <li class='listItem'>oneF</li>
    <li class='listItem'>twoF</li>
</ul>
<ul id='secondOne'>Second<span></span>
    <li class='listItem'>oneS</li>
    <li class='listItem'>twoS</li>
</ul>

私のコード:

$('#firstOne .listItem').draggable({
    helper: 'clone'
});
giveId($('#secondOne'));// initial ids set

$("#secondOne").droppable({
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    drop: function(event, ui) {
        $(ui.draggable).clone().css('background-color', 'pink')
          .attr('id', 'content-' + ($(this).find('.listItem').length + 1))
          .appendTo(this).siblings().css('background-color', 'yellow');
        showId($(event.target));
    },
    accept: '#firstOne .listItem'
}).sortable({
    revert: true,
    update: function(event, ui) {
        showId($(event.target));
    },
    receive: function(event, ui) {
        alert('receipt');
    }
});

function giveId(list) {
    list.find(".listItem").each(function(index) {
        $(this).attr("id", "content-" + index);
    });
    showId(list)
}
// show the last items id
function showId(list) {
    list.find('span').text(list.find('.listItem:last').attr('id'));
}
于 2012-06-06T19:51:06.213 に答える