Applying jquery-ui droppable on nested lists.

Question

Hi there,

I am trying to use jquery droppable on a nested list, applying a change to the background colour of the li on hover. The problem is that it is only applying to the first item in a list. The alert is still alerting the text within the list item though. Any ideas why this would be happening?

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

[Edit] On some testing, the alert is working right, the hover class is being applied (according to fireBug) but it will only change the text-color when I hover over the first element.

<ul id="mailbox" class="filetree">
  <li>
    <span class="folder">[email protected]
    </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 is comments] - Also, possibly related, possibly a css error, it won't let me set the background-color of the li on hover, only font color.

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

[solved] - And finally, it won't let me alert ($(this).id) even though the all the list items have an id attached.

Answer 1

This for alert:

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

This for CSS:

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

I'll continue to update this answer while we work through...easier formatting here.

Answer 2

My solution to nesting dropped items:

// 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's 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's 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){
   }
  });
 }
});