javascript - 如何让 jquery 可排序以在单击按钮时运行函数

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

});

任何有关如何将此代码转换为通过单击按钮触发的内容的帮助都会很棒。

我确实尝试了显而易见的事情

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

即使它会触发警报，也不会运行代码，但前提是放置在 update: 部分的开头处。

Answer 1

如果我很好地理解你的问题，你应该简单地在按钮点击上获取可排序项目的数组:

$(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 范围之外定义一个变量，在范围内更新它并在按钮 上使用它>点击:

$(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 });
    });

});