拖放表格信息？

Question

我有一个带有表格和一些“收藏”文件夹的主页。这些文件夹用于保存“最喜欢的”信息行。用户将特定行的信息从主表拖放到文件夹表中。而不是拖动整行（因为我的行很宽，并且可能不清楚您将这一行放入哪个文件夹），我在每个案例编号之前都有一个图标，理想情况下将保存所述行的信息。在这种情况下，它是一个箭头。我需要做的是，当您将此箭头拖放到此文件夹中时，“拖动行”中的信息将附加到相应的“收藏夹”表中。该图标应与主页上的相应行一起消失。双击文件夹将“打开”该文件夹以查看收藏的行，包括旧的和新删除的。 Here is my fiddle

$( ".drag" ).draggable({ revert: "invalid" });

$( ".dropTarget" ).droppable({
    drop: function( event, ui ) {
        var dropped = parseInt($(this).attr('title')) + 1;
        $( this )
            .attr('title',dropped+' entries'); 

        var delay =  $(this);
        delay.prop('disabled', true).addClass('ui-state-highlight')
        setTimeout(function() {
            delay.prop('disabled', false).removeClass('ui-state-highlight');
        }, 2000)
    }
});

$( ".dropTarget" ).dblclick(function() {
    $( ".fav1table" ).fadeIn();
    $( ".main" ).hide();
    //$(this).removeClass('glyphicon-folder-close').addClass('glyphicon-folder-open');  
});

Answer 1

首先，我建议您在悬停箭头时更改光标类型。这将对用户有所帮助。您需要确定已将哪些行添加到收藏夹。一种解决方案是创建两个 CSS 类。 normal 和 favorite。对于已经“收藏”的每一行，添加类favorite。所以你会有一些像class="drag favorite"这样的箭头。在 CSS 中，只需将“收藏”箭头设置为不可见或不显示。

在.droppable() 方法的drop 事件中，将类“favorite”添加到下拉箭头。所以它将不再可见。您可以稍后在选择器中重新使用此类，例如选择所有喜欢的行...