Application de jquery-ui droppable sur des listes imbriquées

Question

J'essaie d'utiliser jquery droppable sur une liste imbriquée, en appliquant une modification à la couleur d'arrière-plan du li sur hover. Le problème est qu'il s'applique uniquement au premier élément d'une liste. L'alerte alerte toujours le texte dans l'élément de liste. Des idées pourquoi cela se passerait-il?

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

[Modifier] Sur certains tests, l'alerte fonctionne bien, la classe de vol stationnaire est appliquée (selon Firebug), mais il ne changera le texte de couleur quand je passe la souris sur le premier élément .

<ul id="mailbox" class="filetree"> 
    <li> 
    <span class="folder">imap@gazler.com 
    </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 est des commentaires] - Aussi, peut-être lié, peut-être une erreur de css, il ne me laissez agir la couleur de fond de la li sur le vol stationnaire, seule la couleur de police.

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

[résolu] - Et enfin, il ne me laisse pas d'alerte ($ (this) .id), même si tous les éléments de la liste ont un ID.

Answer 1

Cette alerte pour:

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

Ce CSS:

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

Je vais continuer à mettre à jour cette réponse pendant que nous travaillons à travers ... plus facile ici la mise en forme.

Answer 2

Ma solution pour la nidification a chuté produits

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