JQuery UI可排序:根据某些条件恢复位置

时间:2010-04-18 07:49:14

标签: jquery jquery-ui jquery-ui-sortable

我打电话给sortable.stop()进行ajax调用,以便在拖放后存储一些数据。放弃操作。

当ajax调用返回错误(应用程序逻辑错误或网络问题)时,我想将拖动的元素移动到其原始/开始位置,我该如何实现?

场景应该是

  1. 用户拖动A到B
  2. 调用sortable.stop()事件,触发ajax调用
  3. ajax调用返回错误
  4. stop()事件中我们得到了ajax错误
  5. 将A移至原始位置
  6. 用户再次将A移至B
  7. 一切都很好
  8. A仍然处于B
  9. 的新位置

    显示步骤6-8以阐明可以进行连续拖动并且必须忘记先前的错误。

3 个答案:

答案 0 :(得分:23)

看看.sortable('cancel');像这样的东西:

var list = $('#some-list')
list.sortable(
{
    // Some options.
    stop: function()
    {
        $.post('some-url', someData, function()
        {
            if (somethingWentWrong)
            {
                list.sortable('cancel');
            }
        });
    }
});

答案 1 :(得分:8)

感谢 dafi - 这对我有用:

$('#some-list').sortable({
  // other options here,
  receive: function(event, ui) {

    // ajax or function here
    if(somethingWentWrong) {
       $(this).sortable('cancel');
       $(ui.sender).sortable('cancel');
    }

  }

 });

我不确定您是否需要$(this).sortable('cancel');,但我认为最好取消源目标可排序列表。这样,列表项立即恢复。其他可排序options此处。

答案 2 :(得分:1)

谢谢,liveat60fps,它是你需要的两个声明中的第二个声明。

$('#some-list').sortable({

      // other options here,
  receive: function(event, ui) {

    // ajax or function here
    if(somethingWentWrong) {
       $(this).sortable('cancel');
       $(ui.sender).sortable('cancel');
    }    
  }    
});

这种方式在某种情况下,你可以重新回到原始状态。