DigitalJoel

2011/04/20

Removing A Dragged And Dropped List Item

Filed under: development, jquery — Tags: , — digitaljoel @ 11:11 pm

In a previous post I mentioned how to take a table row and drag it onto a sortable list. The problem with that is that there was no way to remove the item once it was dropped on the list. So, I modified the original code so that the dropped item now has a button that allows for removal of the item. Here is the new version in its entirety:

        var qTable;
        var newSurvey;
        // create the fancy datatable
        $(function() {
            // setup the datatable
            qTable = $('#questionTable').dataTable( {
                    "aoColumns": [
                                  { "asSorting": [ "desc", "asc" ] },
                                  { "asSorting": [ "desc", "asc", "asc" ] },
                              ]
                    , "bJQueryUI": true
                }
            );
            
            $(qTable.fnGetNodes()).draggable({
                opacity: 0.7,
                helper: function() {
                    var text = this.children[0].innerText;
                    var result = "<li id='"+this.id+"'>"+text+"</li>";
                    return result;
                },
                connectToSortable: '#newSurvey'
            });

            newSurvey = $('#newSurvey');
            newSurvey.sortable({
                beforeStop: function( event, ui ) {
                    var id = ui.helper.attr( "id" );
                    if ( id.indexOf( 'li' ) == -1 ) {
                        id = 'li' + id;
                    }
                    var text = ui.helper.text();
                    var li = "<li id='"+id+"'><span class='ui-icon ui-icon-circle-close' onclick='remove(\""
                            +id+"\")'></span>"+text+"</li>";
                    $(ui.item).replaceWith( li );
                },
            }).disableSelection();
        });
        
        function remove(id)
        {
            var li = $('#'+id);
            li.fadeOut('fast', function() { li.remove();});
        }

So, the biggest difference between this and the previous is in the “beforeStop” function. The first being this block:

                    if ( id.indexOf( 'li' ) == -1 ) {
                        id = 'li' + id;
                    }

The problem I had was that when dropping from the table row, everything was awesome, but if I re-ordered within the list, then I kept pre-pending another ‘li’ to the front of the id. So I would end up with a row with an id of ‘lilili123’ or something like that. Undesirable at best. So now, I check to ensure it only has one li prefix.

The second difference, and the main one for this post, is the addition of the remove function and the button to remove it when dropped, contained here:

                    var li = "<li id='"+id+"'><span class='ui-icon ui-icon-circle-close' onclick='remove(\""
                            +id+"\")'></span>"+text+"</li>";
                    $(ui.item).replaceWith( li );

and here:

        function remove(id)
        {
            var li = $('#'+id);
            li.fadeOut('fast', function() { li.remove();});
        }

The first section is the new code to replace the helper from the table row draggable with the list item, including the button for removal. If that sentence didn’t make sense, then go back and read the post linked above to get the details. Since this is all based on jquery, I used a jquery icon for the button. It is nice because then it will mesh with whatever jquery theme you are using.

The remove function uses a jquery animation to quickly fade the list item out and then remove it from the list. You must call .remove() to get it out of the list altogether.

The last wrinkle I have in this is that a user can drag the same item from the table onto the list, resulting in multiple copies of the list item, but that’s a problem for another day.

Advertisements

2011/04/05

Get the “Next” value in a Java Enum

Filed under: development, java — Tags: — digitaljoel @ 10:32 pm

Java Enums. An awesome addition to Java 1.5 so we could avoid using public static ints for that purpose. I’ve been using them for some time with success and never noticed one deficiency until now. You can get the ordinal of an enum value with the ordinal() method. That is basically the index in the order the values were declared. So, if your enum look something like this:

 public enum Planet { MERCURY, VENUS, EARTH, MARS, JUPITER, SATURN, URANUS, NEPTUNE }

In this case, MERCURY would have an ordinal of 0, then VENUS 1, and so forth. Now, what if you want to iterate through them? You can get all the values of an enumerated type as an array using the values() method. Cool, right? Well, what if I don’t want to iterate through them, but I want to simply progress from one to the next. It would be cool if math operators (like + and -) would let you go from one to the next, but that’s not the case. I had a need to go from one to the next, so I changed my enum by adding the following method.

 private enum Planet { MERCURY, VENUS, EARTH, MARS, JUPITER, SATURN, URANUS, NEPTUNE;
    public Planet getNext() {
      return this.ordinal() < Planet.values().length - 1
          ? Planet.values()[this.ordinal() + 1]
          : null;
    }
  }

Now, if I do Planet.MERCURY.getNext() I would get VENUS. This takes advantage of the ordinal of each entry (which you cannot assign in any other way than the order in which you declare the enum values) and the values method, indexing into the values array to get the next value. If you attempt to go off the end, it’ll return null. It would be simple to make it wrap instead if that makes sense for your case. It would also be trivial to take this and implement a “getPrevious” if you have a need to go in reverse.

Blog at WordPress.com.