如何让 jquery 可排序以在按钮单击时运行功能

Question

我有一些代码可以收集可排序列表并将其转换为数组。代码设置为处理 drop 事件，因此当您拖动项目然后将其放下时，将创建并发送数组。我需要更改它，以便它由单击按钮触发，但由于某种原因，将其转换为单击事件将不起作用。

这是现在的功能

$(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

如果我很好理解您的问题，您应该简单地在按钮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

你没有更新 disabled 属性，试试这个

$('#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

最终为我解决这个问题的是使用代码创建和更新变量，但仅在单击按钮时发送它。所以我在 get 请求周围放置了一个点击事件，这很有效。

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

     })
    }
  });
});