jquery - 一页上的jQuery多个可排序列表

Question

我有一个页面，可以在一个页面上包含多个不同的媒体库。每个图库拇指在编辑模式下都是“可排序的”。这是第一个找到的作品，但每个额外的画廊都不会排序。我相信这是因为每个可排序列表都设置为带有 class 的容器，.dynamic_med_gallery因此每个附加的可排序列表都试图使用带有 class 的第一个 div 容器.dynamic_med_gallery。如何将每个容器设置$(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();
   }
};

Answer 1

这应该为您解决问题。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();
    });
}

Answer 2

我对此进行了更多思考，并得出以下结论：

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