使 Div 列表可排序和可点击答案

【问题标题】：Make List Of Divs Sortable & Clickable使 Div 列表可排序和可点击
【发布时间】：2012-02-29 14:23:14
【问题描述】：

可以列出div 的可排序/可拖动列表，但如果我点击列表中的div 之一，它会执行.show('div') jquery 功能？

请帮忙

【问题讨论】：

也许这会有所帮助：petefreitag.com/item/736.cfm

标签： jquery html draggable jquery-ui-sortable

【解决方案1】：

Jquery UI 具有 draggable and sortable 交互。

【讨论】：

【解决方案2】：

我实际上刚刚完成了那件事。我使用 jquery-ui 方法 sortable() 和 portlet() 创建了自己的插件。这是我的代码：

(function($){
$.fn.jSortable = function(){

    var element = this;
    var fixHelper = function(e, ui) {
        ui.children().each(function(){
            $(this).width($(this).width());
        });
        return ui;
    };

    $(element).find("div.odd").addClass("odd2");
    $(element).find("div.even").addClass("odd2");
    $(element).find("div.job-items-block").hide();

    $(element).sortable({
        distance: "30"

    });

    $(".full-job-portlet").addClass("ui-widget ui-widget-content ui-helper-clearfix")
        .find(".odd2")
            .addClass("ui-widget-header")
            .end()
        .find(".job-items-block");

    $(".odd2").click(function(){
        $(this).parents(".full-job-portlet:first").find(".job-items-block").slideToggle();
    });
    $(element).disableSelection();
};

})(jQuery);

然后在我的html中输入：

$(document).ready(function(){
    $('#jobTable').jSortable();
});

希望有帮助。

【讨论】：