3

データのリストを並べ替えて、データベースを関連する位置で更新できるように、ドラッグアンドドロップを実装しようとしています。

実用的な例がありますが、ajaxを介して取り込まれたリストで同じコードを使用しようとすると、イベントはバインドされますが、そのメソッドはトリガーされず、アイテムはスワップされたままになりません（ハツカネズミ）

これが私のhtmlです

<ul class='sortable'>
    <li>
        <ul>
            <li>Data</li>
            <li>Data2</li>
        </ul>
   </li>
   <li>
        <ul>
            <li>Data3</li>
            <li>Data4</li>
        </ul>
   </li>
</ul>

そして私のJavaScriptはこのようになります。内部ULのみを交換したい。つまり、liData2などを含むリストです。

$(document).ready(function()
{
    //$(".sortable").disableSelection();
    $(".sortable").live("dblclick", function()
    {
        $(".sortable").sortable({
            update : function()
            {
                alert("update");
            }
        });
    });
});

ダブルクリックやクリックなどのイベントを使用することが、イベントをバインドする唯一の方法でした。sortableの使用は機能しませんでした。

これは、要素と上記のサンプルをバインドするために使用したコードです。

$(document).ready(function()
{
    $(".sortable").live("sortable", function()
    {
        $(".sortable").sortable({
            update : function()
            {
                alert("update");
            }
        });
    });
});

また、.live（）をラップせずに上記のコードを試しましたが、それも機能しませんでした。

サーバーからリストをロードするコードは次のとおりです。

$(".myLink").live("click", function()
{
    var id   = $(this).attr("id");
    var url = base_url + "admin/controller/function/" + id;

    showList(url);

    return false;
});


//loads data into the form div
function showList(url)
{
    var arr = new Array();
    $.post(url, arr, function(data)
    {
        $("#form").html(data);

    }, "text");
}

正しい方向への提案や指針があれば役に立ちます。

ありがとう

4

2 に答える 2

2

[アップデート]

AJAX コールバック行を次のように変更します$("#form").html(data);。

$("#form").html(data).find('.sortable').sortable(originalOptions);

元のsortable()コマンド (他の場所にあると思います) を次のように変更します。

var originalOptions = { update: function(){ alert('click');}  };
$(".sortable").sortable( originalOptions );

重要なことは、関数originalOptionsで使用できることを確認することですshowList。

[元の回答]

refreshリストが更新されたときに使用するだけです。だから、あなたがこの$.postコードを持っているとしましょう：

$.post('/url', { new_positions: whatever }, function(data){
  // data = a bunch of 'lis' but no 'ul'
  $('.sortable').html(data).sortable('refresh');
}, 'html');

これにより、古いliアイテムが新しいアイテムに変更され、refreshは新しいアイテムを再バインドして受け入れる必要があります。

于 2010-02-05T04:53:34.180 に答える
1

わかりました、なんとか修正しましたが、なぜこれが機能しなくなるのかわかりませんが、間違いなく問題です. 並べ替えようとしていたリストのスタイル シートには、リストを水平方向に表示するためのフロートが残っていました。このスタイルを削除すると、更新イベントがトリガーされました。

ここで、display:inline を使用して、リストを水平方向にスタイル設定します。解決するのに何時間もかかったので、これが誰かの役に立てば幸いです。

助けてくれてありがとう。ベン

于 2010-02-08T08:29:15.403 に答える