如何在单击按钮时将 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

您没有更新禁用的 属性，试试这个

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

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

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

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


     }
  });

  });

你看到这个了吗post, jQuery sortable only works in document ready, not with a button

Answer 2

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

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

     })
    }
  });
});

Answer 3

如果我很理解你的问题，你应该简单地在按钮 click:

上获取 array 可排序项目

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

});