Question

我一直在努力将jQuery的可选/可排序/ portlet UI组合成一个。到目前为止，在stackoverflow上的一些帖子的帮助下，我已经能够取得一些不错的进展。但是，在我最终能够组合排序/可选功能并将多个项目拖动到单独的列表之后，我注意到我无法再切换我的portlet。这只会影响portlet移动后的位置，甚至会被拾取并重新放回到同一位置。

编辑 - 将任何不必要的代码划分为功能。

JS CODE

nav ul
   {
    height:500px; **width:43%**;
    overflow:hidden;
    overflow-y:scroll;
    overflow-x:scroll;
    display: inline-block;
    padding: 5px;
   }

HTML

$(document).ready(function() {             
    $(".group-content").selectable({
        filter: "div:not(.portlet-toggle, .portlet-header, .portlet-content)",
        cancel: ".portlet-toggle, .portlet-header"})
    .sortable({
            connectWith: ".group-content",
            handle: ".portlet-header",
            cancel: ".portlet-toggle",
            cursor: 'move',   
            helper: function(event, ui) {
                if(!ui.hasClass('ui-selected')) {
                    ui.parent().children('.ui-selected').removeClass('ui-selected');
                    ui.addClass('ui-selected');
                }  
                var selected = ui.parent().children('.ui-selected').clone();
                ui.data('multidrag', selected).siblings('.ui-selected').remove();
                return $('<div/>').append(selected);
                },
            stop: function( event, ui ) {   
                var selected = ui.item.data('multidrag');
                ui.item.after(selected);
                ui.item.remove();
},});

    $( ".portlet" )
        .addClass( "ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" )
        .find( ".portlet-header" )
            .addClass( "ui-widget-header ui-corner-all" )
            .prepend( "<span class='ui-icon ui-icon-plusthick portlet-toggle'></span>");

    $( ".portlet-toggle" ).click(function() {
        var icon = $( this );
        icon.toggleClass( "ui-icon-minusthick ui-icon-plusthick" );
        icon.closest( ".portlet" ).find( ".portlet-content" ).toggle();});
 });

任何帮助表示赞赏！

这是jfiddle演示它的链接。 jfiddle

Answer 1

只需更改绑定：

$( ".portlet-toggle" ).click(function() { ... }

为：

$( "body" ).on("click", ".portlet-toggle", function(e) { ... }

移动元素后，它们不再是相同的DOM元素。 Fiddle

排序/选择组合后丢失jQuery Portlet功能

编辑 - 将任何不必要的代码划分为功能。

1 个答案: