ボタンをクリックしてjquery sortable関数を実行する方法

Question

並べ替え可能なリストを集めて配列に変換するコードがあります。コードはドロップイベントで動作するように設定されているので、アイテムをドラッグしてドロップすると、配列が作成されて送出されます。私はこれを変更して、代わりにボタンのクリックによってトリガーされるようにする必要があります。何らかの理由でこれをクリックイベントにすると動作しません。それは素晴らしいことだボタンのクリックによってトリガーされるものに、このコードを有効にする方法上の任意のヘルプは今

$(document).ready(function(){ 

    $('#sortable-stages').sortable({ 
    update: function(event, ui) { 
     var stage = document.getElementsByClassName('stage'); 
     var stageOrder = $(this).sortable('toArray'); 
     $.get('/stages/reorder', { 'order' : stageOrder }); 
    } 
    }); 

}); 

であるとしてここで

機能です。 update:部分の上に、先頭に右に置いた場合にのみ、

は私が明らか

$(document).on('click','#stagereorderbutton', function() { 
    //... 
}); 

を試してみましたし、それはそれは、アラートをトリガーするにもかかわらず、コードを実行されませんでした。あなたがdisabledプロパティを更新していない

Answer 1

私はよくあなたの質問を理解していれば、あなたは、単にボタンclickでソート可能なアイテムの配列を取得する必要があります：

$(document).ready(function(){ 

    var items = $('#sortable-stages').sortable(/*options...*/); 
    $(document).on('click','#stagereorderbutton',function(){ 
     $.get('/stages/reorder', { 'order' : items.sortable('toArray') }); 
    }); 

}); 

JSFiddle Demo

---

そして、まだ別のソリューションupdateオプションが必要な場合 - あなたは、sortableスコープの外で変数を定義する範囲内でそれを更新し、ボタンclick上でそれを使用することができます。

$(document).ready(function(){ 

    var stageOrder; 
    $('#sortable-stages').sortable({ 
     update: function(event, ui) { 
      var stage = $('.stage'); 
      stageOrder = $(this).sortable('toArray'); 
     } 
    }); 
    $(document).on('click','#stagereorderbutton',function(){ 
     $.get('/stages/reorder', { 'order' : stageOrder }); 
    }); 

}); 

Answer 2

、この

$('#stagereorderbutton').sortable({ 
disabled: false, 
    update: function(event, ui) { 

    var stage = document.getElementsByClassName('stage'); 

    var stageOrder = $(this).sortable('toArray'); 

    $.get('/stages/reorder', { 'order' : stageOrder }); 


    } 
    }); 

    }); 

を試してみてください、あなたは、作成および更新するためのコードを使用していたものを私のためにこれを解決することになった、 jQuery sortable only works in document ready, not with a button

Answer 3

を、この記事を見たことがありますボタンクリックでのみ送信します。だから私は取得要求の周りにクリックイベントを入れ、それは働いた。

$(document).ready(function(){ 

    $('#sortable-stages').sortable({ 
    update: function(event, ui) { 

    var stage = document.getElementsByClassName('stage'); 
    var stageOrder = $(this).sortable('toArray'); 

    $('document).on('click','#stagereorderbutton',function() { 

     $.get('/stages/reorder', { 'order' : stageOrder }); 

    }) 
    } 
    }); 
});