Using jquery-ui droppable in nested lists

Question

I am trying to use jquery droppable in a nested list, applying background color change for hovering. The problem is that it only applies to the first item in the list. However, the warning still warns the text in the list item. Any ideas why this is happening?

  $("#mailbox li").droppable({
   greedy: true,
   hoverClass: 'mailbox-hover',
   drop: function(event, ui) {
    alert($(this).text());
   }
  });

[ Edit ] With some testing, the warning works correctly, the hover class is applied (according to FireBug), but it only changes the color of the text when you hover over the first element.

<ul id="mailbox" class="filetree">
  <li>
    <span class="folder">[e-mail]
    </span>
    <ul>
      <li id="0-INBOX">
        <span class="folder">
        </span>
        <a href="#" onclick="changeFolder('0', 'INBOX', 'INBOX');" name="INBOX">INBOX
        </a>
        <ul>
          <li id="0-INBOX-Drafts">
            <span class="file">
            </span>
            <a href="#" onclick="changeFolder('0', 'INBOX.Drafts', 'Drafts');" name="INBOX.Drafts">Drafts
            </a>
          <li id="0-INBOX-Sent">
            <span class="file">
            </span>
            <a href="#" onclick="changeFolder('0', 'INBOX.Sent', 'Sent');" name="INBOX.Sent">Sent
            </a>
          <li id="0-INBOX-Trash">
            <span class="folder">
            </span>
            <a href="#" onclick="changeFolder('0', 'INBOX.Trash', 'Trash');" name="INBOX.Trash">Trash
            </a>
            <ul>
              <li id="0-INBOX-Trash-New">
                <span class="file">
                </span>
                <a href="#" onclick="changeFolder('0', 'INBOX.Trash.New', 'New');" name="INBOX.Trash.New">New
                </a>
            </ul>
        </ul>
    </ul>
  </li>

[ css are comments ]. Also, maybe a related, maybe css error, it will not let me set the background color li to hover, only the font color.

.mailbox-hover
{
    background-color: #0000ff;
}
.mailbox-dropped
{
    color: #ffff00;
}

[ resolved]. , , ($ (this).id), .

Answer 1

:

alert($(this).attr("id"));

CSS:

#mailbox li { background-color: #ffffff; } 
#mailbox li.mailbox-hover { background-color: #0000ff;} 
.mailbox-dropped { color: #ffff00; }

, ... .

Answer 2

:

// Make the drop_area div droppable
$("#drop_area").droppable({
 accept: "#temp_item",
 drop: function(event,ui){

  // Get the id of the item that was just dropped
  var id = ui.draggable.attr('id');

  // Clone the item and append it to the drop area
  $(this).append($(ui.draggable).clone());

  // Remove the ability to drag the current item around
  $('#temp_region').removeClass("dragg");
  $('#temp_region').removeClass("ui-draggable");

  // Create a new name for the dropped item
  var $new_name = rnd();
  $('#' + id).attr('id', $new_name);

  // Remove the dropped item CSS position directives
  $('#' + $new_name).css('top', '');
  $('#' + $new_name).css('left', '');

  // Make the newly renamed item droppable so that nesting can take place
  $('#' + $new_name).droppable({
   accept: '*',
   drop: function(e,ui){
    if ( e.clientY < $(this).closest("div").position().top + $(this).closest("div").height() )
    {
     // Determine what is being dropped and onto what
     var dropped_item = $(ui.draggable).attr('id');
     var dropped_on = $(this).attr('id');

     // Get the HTML of each item
     var dropped_html = $('#' + dropped_item).html();
     var dropped_on_html = $('#' + dropped_on).html();

     // Remove the dropped item from the DOM
     $('#' + dropped_item).remove();

     // Append the dropped item into the item it was just dropped on
     $('#' + dropped_on).append(ui.draggable);

     // Remove the dropped item CSS position directives
     $('#' + dropped_item).css('top', '');
     $('#' + dropped_item).css('left', '');

     // Let the user move the dropped item
     $('#' + dropped_item).draggable();
    }
   }
  });

  // Force the dropped item to only move around in the container
  $('#' + $new_name).draggable({containment: '#drop_area'});

  // All the user to snap items to each other for usability sake
  $('#' + $new_name).draggable({
   snap: true,
   stop: function(event, ui){
   }
  });
 }
});