Drag and drop table information?

Question

I have a home page with table and a few 'favorite' folders. These folders are for holding 'favorite' rows of information. Users drag and drop specific rows of information from the home table to the folder table. Rather than dragging the entire row (because my rows are very wide, and it can be unclear which folder you are dropping this row into), I have an icon before each case number that will ideally hold the information for said row. In this case, it's an arrow. What I need to happen is when you drag this arrow and drop it in this folder, the information from the 'dragged row' will append to the according 'favorite' table. This icon should disappear on drop, along with the corresponding row from the home page. Double clicking the folder will 'open' this folder to view favorite rows, both old and newly dropped. 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');  
});

TCHdvlp TCHdvlp · Accepted Answer · 2013-09-23T14:03:08

First of all, I recommend you to change the cursor type while hovering the arrow. This will help the user. What you need is to determine what lines allready have been added to favorite. A solution can be to create two CSS classes. normal and favorite. For each line that have already been "favorized", add class favorite. So you will have some arrows like class="drag favorite". In the CSS just set "favorized" arrows as invisible or undisplayed.

On the drop event of the .droppable() method, add the class "favorite" to the dropped arrow. So it will be not visible anymore. You can re-use this class later in a selector, to select all favorite rows for instance...

Drag and drop table information?

1 Answers