Question

我用拖放的表格，我也有选择复选框和SelectAll复选框..但问题是，当我选择元素并将其移动到另一个表格时，我不能再选择相同的项目..

我认为问题部分在于我使用.remove()。

您也可以在fidle链接上看到代码。

 $(document).ready(function() {

 $("tbody.connectedSortable")

.sortable({

connectWith: ".connectedSortable",
delay: 150, //Needed to prevent accidental drag when trying to select
revert: 0,
helper: function (e, item) {

    console.log(e);

    //Basically, if you grab an unhighlighted item to drag, it will deselect (unhighlight) everything else
    if (!item.hasClass('selected')) {
        item.addClass('selected').siblings().removeClass('selected');
    }

    //////////////////////////////////////////////////////////////////////
    //HERE'S HOW TO PASS THE SELECTED ITEMS TO THE `stop()` FUNCTION:

    //Clone the selected items into an array
    var elements = item.parent().children('.selected').clone(true);

    //Add a property to `item` called 'multidrag` that contains the
    //  selected items, then remove the selected items from the source list
    item.data('multidrag', elements).siblings('.selected').remove();

    //Now the selected items exist in memory, attached to the `item`,
    //  so we can access them later when we get to the `stop()` callback

    //Create the helper
    var helper = $('<tr/>');
    return helper.append(elements);
},
stop: function (e, ui) {
    //Now we access those items that we stored in `item`s data!

    var elements = ui.item.data('multidrag');

    //`elements` now contains the originally selected items from the source list (the dragged items)!!

     $.each(elements,function(i,l){
        $(this).removeClass();
        $(this).find('input:checkbox').prop('checked',false);
    })



    //Finally I insert the selected items after the `item`, then remove the `item`, since
    //  item is a duplicate of one of the selected items.
    ui.item.after(elements).remove();

}

})



$('.selectall').click(function (e) {
    $(this).closest('table').find('td input:checkbox').prop('checked', this.checked);
    if( $(this).closest('table').find('td input:checkbox').is(':checked')){
        $(this).closest('table').find('tbody > tr').addClass('selected');
    }
    else{
        $(this).closest('table').find('tbody > tr').removeClass('selected');
    }


});

$("tbody.connectedSortable input:checkbox").click(function(e) {
    if($(this).is(":checked")){
        $(this).closest("tr").addClass("selected");
    } else{
        $(this).closest("tr").removeClass("selected");
        $selectall = $(this).closest('table').find('thead tr input:checkbox');
        $selectall.prop('checked',false)
    }
})
});

Fiddle Link

Answer 1

我认为你不需要辅助函数，在辅助函数中，你实际上创建了拖动项的副本并删除了原始的一个。但是，副本丢失了事件绑定。

所以，我只是删除了辅助函数，并且效果更好，如果我理解正确，也许这就是你想要的效果。

$(document).ready(function() {

 $("tbody.connectedSortable")

.sortable({

connectWith: ".connectedSortable",
delay: 150, //Needed to prevent accidental drag when trying to select
revert: 0,
stop: function (e, ui) {
    //Now we access those items that we stored in `item`s data!

    var elements = ui.item.data('multidrag');

    //`elements` now contains the originally selected items from the source list (the dragged items)!!

     $.each(elements,function(i,l){
        $(this).removeClass();
        $(this).find('input:checkbox').prop('checked',false);
    })



    //Finally I insert the selected items after the `item`, then remove the `item`, since
    //  item is a duplicate of one of the selected items.
    ui.item.after(elements).remove();

}

})

以下是demo link

remove（）jQuery之后addClass无法正常工作

1 个答案: