jQuery在一个页面上有多个可排序列表

时间:2013-06-15 18:55:30

标签: jquery jquery-ui-sortable

我有一个页面可以在一个页面上有几个不同的媒体库。每个图库拇指在编辑模式下都是“可排序的”。这适用于第一个,但每个额外的图库不会排序。我相信这是因为每个可排序列表都设置为具有类.dynamic_med_gallery的容器,因此每个额外的sortable都尝试使用带有类.dynamic_med_gallery的第一个div容器。如何将每个容器设置为$(this)以使每个容器保持独立且唯一?

function sort_thumbs() {
   if (edit_mode == 'on') {
      var cont = $( ".dynamic_med_gallery" );
      cont.sortable({
         tolerance: 'pointer', 
         containment: cont, 
         items:'.dynamic_thumb',
         stop : function() {
            cont.addClass('update_index')
         }
      }).disableSelection();
   }
};

2 个答案:

答案 0 :(得分:2)

这应该可以帮到你。 http://jsfiddle.net/qBzRC/27/

edit_mode = 'on';
if (edit_mode == 'on') {
    $(".dynamic_med_gallery").each(function () {
        $(this).sortable({
            tolerance: 'pointer',
            containment: $(this),
            items: '.dynamic_thumb',
            stop: function () {
                $(this).addClass('update_index'); // Not sure what this is for... might need changing depending on your needs.
            }
        }).disableSelection();
    });
}

答案 1 :(得分:1)

我对此进行了一些深思熟虑并按如下方式进行了解决:

function sort_thumbs() {
    if (edit_mode == 'on') {
        $( ".dynamic_med_gallery" ).each(function() {
            cont = $(this);
            var this_id = cont.attr('id');

            cont.sortable({
                tolerance: 'pointer', 
                containment: cont, 
                items:'.dynamic_thumb',
                stop : function() {
                      $('#'+this_id).addClass('update_index');
                }
            }).disableSelection();
        });
    }
};