Sort/Select 组合后失去 jQuery Portlet 功能

Question

我一直致力于将 jQuery 的 selectable/sortable/portlet UI 合二为一。到目前为止，在 Whosebug 上的一些帖子的帮助下，我已经取得了一些不错的进展。然而，在我最终能够组合 sort/selectable 功能并将多个项目拖到一个单独的列表后，我注意到我无法再切换我的 portlet。这只会影响移动后的 portlet，甚至会影响它们被拾起并放回同一位置。

编辑 - 删除了所有不必要的功能代码。

JS 代码

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

HTML

<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
</head>
<body>

<div class="group-content" id="Column 1">
<b>Column 1</b>
<div id= "ID_1" class="portlet">
<div class="portlet-header">Task 1</div>
<div class="portlet-content">
<b>Task Number: </b> 1
<b>Description: </b> Some description of task 1
</div>
</div>
</div>

<div class="group-content" id="Column 2">
<b>Column 2</b>
<div id="ID_4" class="portlet">
<div class="portlet-header">Task 4</div>
<div class="portlet-content">
<b>Task Number: </b> 4
<b>Description: </b> Some description of task 4
</div>
</div>
</div>

<div class="group-content" id="Column 3">
<b>Column 3</b>
<div id= "ID_7" class="portlet">
<div class="portlet-header">Task 7</div>
<div class="portlet-content">
<b>Task Number: </b> 7
<b>Description: </b>Some description of task 7
</div>
</div>
</div>
</body>

感谢任何帮助！

这是一个 link 的 jfiddle 演示。 jfiddle

Answer 1

只需更改绑定：

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

至：

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

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

Sort/Select 组合后失去 jQuery Portlet 功能

Losing jQuery Portlet Functionality after Sort/Select combination

jquery

jquery-ui

portlet

jquery-ui-sortable

selectable

编辑 - 删除了所有不必要的功能代码。