在嵌套列表上应用 jquery-ui droppable

Question

我正在尝试在嵌套列表上使用 jquery droppable，对悬停时 li 的背景颜色进行更改。问题是它仅适用于列表中的第一项。不过，警报仍然会警告列表项中的文本。有什么想法为什么会发生这种情况吗？

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

[编辑] 在某些测试中，警报工作正常，正在应用悬停类（根据 fireBug），但当我将鼠标悬停在第一个元素上时，它只会更改文本颜色。

<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 是注释] - 另外，可能相关，可能是 css 错误，它不会让我设置悬停时 li 的背景颜色，只能设置字体颜色。

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

[已解决] - 最后，即使所有列表项都附加了 id，它也不会让我发出警报 ($(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'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){
   }
  });
 }
});