Применение JQuery-UI сбрасывается на вложенные списки - PullRequest
Новая
       3

Применение JQuery-UI сбрасывается на вложенные списки

3 голосов
/ 30 января 2010

Я пытаюсь использовать 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 is comments ] - Также, возможно, связанный, возможно, ошибка css, он не позволит мне установить цвет фона li при наведении, только цвет шрифта. 

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

[ решено ] - И, наконец, это не позволит мне предупредить ($ (this) .id), даже если ко всем элементам списка прикреплен идентификатор.

Ответы [ 2 ]

1 голос
/ 30 января 2010

Это для предупреждения: 

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

Это для CSS: 

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

Я буду продолжать обновлять этот ответ, пока мы работаем ... проще форматировать здесь.

0 голосов
/ 13 июля 2010

Мое решение для вложения упавших предметов: 

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