3

ネストされたリストで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">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 はコメントです ] - また、関連している可能性があり、css エラーの可能性があります。ホバー時に li の背景色を設定できず、フォントの色のみを設定できません。

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

[解決済み] - そして最後に、すべてのリスト項目に id が添付されていても、($(this).id) を警告することはできません。

4

2 に答える 2

1

これはアラート用です：

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

CSSの場合：

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

作業中はこの回答を更新し続けます...ここでフォーマットを簡単にします。

于 2010-01-30T02:58:16.760 に答える
0

ドロップされたアイテムをネストするための私の解決策:

// 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){
   }
  });
 }
});
于 2010-07-12T23:15:36.757 に答える