Question

我无法选择并在完成后拖动项目返回

我想在两个表之间拖动多行

脚本

    $("#tbodyMember tr").click(function(e) {
        $("#tbodyNotMember").find('tr').removeClass("selected");               
        $(this).toggleClass('selected');
    });
    $("#tbodyNotMember tr").click(function(e) { 
        $("#tbodyMember").find('tr').removeClass("selected");         
        $(this).toggleClass('selected');
    });
    $(".connectedSortable tr").draggable({
        helper: function(){
            var selected = $('.connectedSortable tr.selected');
            if (selected.length === 0) {
                selected = $(this).addClass('selected');
            }
            var container = $('<div/>').attr('id', 'connectedSortable');
            container.append(selected.clone().removeClass("selected"));
            return container;
         }
    }); 
    $("#tbodyMember").droppable({
        drop: function (event, ui){             
            $(this).find('tr:last').after($(ui.helper.children()));
            $('#tbodyNotMember tr.selected').remove();
        }
    }); 
    $("#tbodyNotMember").droppable({
        drop: function (event, ui){        
            $(this).find('tr:last')
                    .after($(ui.helper.children()));
            $('#tbodyMember tr.selected').remove();       
        }
    });

Answer 1

您需要将可拖动事件绑定到克隆的tr元素。

查看更新的代码：http://jsfiddle.net/XN2Vh/

 function draggableHelper(){
            var selected = $('.connectedSortable tr.selected');
            if (selected.length === 0) {
                selected = $(this).addClass('selected');
            }
            var container = $('<div/>').attr('id', 'connectedSortable');
            container.append(selected.clone().removeClass("selected").draggable({
                    helper: draggableHelper
                }));
            return container;
         }
    $(".connectedSortable tr").draggable({
        helper: draggableHelper
    });

Answer 2

您需要在副本上保留可拖动的事件处理程序。你可以通过赋予克隆方法真实来做到这一点。

我宁愿实际移动选定的（及其处理程序）项而不是克隆它们。方法如下：

$("#tbodyMember").droppable({
        drop: function (event, ui){             
            $(this).append($('tr.selected'));
            $('#tbodyNotMember tr.selected').remove();
        }
    }); 
    $("#tbodyNotMember").droppable({
        drop: function (event, ui){        
            $(this).append($('tr.selected'));
            $('#tbodyMember tr.selected').remove();       
        }
    });

见： * append * clone

如何在拖放完成后可拖动物品返回

2 个答案: