on嵌套sortables中的drop事件

时间:2013-01-04 10:54:03

标签: jquery nested-sortable

我正在使用这个嵌套的可排序插件http://mjsarfatti.com/sandbox/nestedSortable/来对我的内容管理系统中的图片幻灯片进行排序。

我尝试使用html5 ondrop事件,这样每当发生一个drop事件时,sort将通过ajax post保存,但仍然在drop下没有转到save_order函数

HTML:

<div ondrop="save_order(event)" ondragover="return false;>
    <ol class="sortable">
        <li id="list_1" draggable="true" class="mjs-nestedSortable-no-nesting"><div><img src="{image_path}"/></div></li>
        <li id="list_2" draggable="true" class="mjs-nestedSortable-no-nesting"><div><img src="{image_path}"/></div></li>
    </ol>
</div>

JS:

$(document).ready(function(){
    $('.sortable').nestedSortable({
        disableNesting  : 'mjs-nestedSortable-no-nesting',
        handle          : 'div',
        items           : 'li',
        toleranceElement: '> div'
    });
});

function save_order(event)
{
   serialized = $('ol.sortable').nestedSortable('serialize');
    $.post({my_ajax_url}',serialized,function(data){
      alert('save!');
    });
}

1 个答案:

答案 0 :(得分:8)

只需要弄清楚这一点。使用stop属性。有点像...

$(document).ready(function(){
  $('.sortable').nestedSortable({
    disableNesting  : 'mjs-nestedSortable-no-nesting',
    handle          : 'div',
    items           : 'li',
    toleranceElement: '> div',
    stop: function() { save_order(); }
  });
});