создать подсписок элемента списка без детей - PullRequest
Новая
       0

создать подсписок элемента списка без детей

1 голос
/ 26 июля 2010

Небольшая помощь нужна с jquery sortable.

У меня есть такой вот вложенный список: 

<div id="tree">
<ul>
    <li class="n-1">root
        <ul>
            <li class="n-2">Academic
                <ul>
                    <li class="n-5">Staff</li>
                    <li class="n-6">Courses</li>
                </ul>
            </li>
            <li class="n-3">Administration</li>
            <li class="n-4">Technical
                <ul>
                    <li class="n-6">Courses</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>
</div>

и связанный список: 

<div id="orphans">
    <ul>
        <li class="n-47">a</li>
        <li class="n-48">b</li>
        <li class="n-49">c</li>
        <li class="n-50">d</li>
    </ul>
</div>

Что мне нужносоздать неупорядоченный список при перетаскивании LI, чтобы при наведении указателя мыши на ли в целевом списке без дочернего списка создавался новый список - и удалять его при выходе, если элемент не был добавлен в этот список.

Самым быстрым решением было бы перевести текущий элемент наверх, но у него есть место, где можно ловить его с помощью сортируемого.

вот что я имею до сих пор: 

$('#tree ul li li , #orphans ul li')
    .addClass('closed')
    .live('click',function(){
        $(this).toggleClass( 'open closed');
    });

$('#tree ul ul')
    .sortable({
        items: 'li',
        connectWith:    '#tree ul ul',
        cursor:         'crosshair',
        helper:         'clone',
        zIndex:         999,
        placeholder:    'sort-highlight',
        opacity:        '0.6',
        over:           function(event,ui)
                        {
                            $(this).children('li.closed').toggleClass( 'open closed');
                            $(this).children('li:not(:has(ul)').append('<ul><li class="dummy">DADADA</li></ul>');
                        },
        out:            function(event,ui)
                        {
                            $('li.dummy').remove();
                            $('ul:empty').remove();
                        }
    })
    .disableSelection();


$('#orphans ul')
    .sortable({
        items: 'li',
        connectWith : '#tree ul',
        cursor: 'crosshair',
        helper: 'clone',
        zIndex: 999,
        placeholder: 'sort-highlight',
        opacity: '0.6'
    })
    .disableSelection();

любая помощьочень ценится.

Ответы [ 2 ]

1 голос
/ 10 мая 2011

На самом деле, у меня нет такого же расположения списка, как у вас, я видел внутри li, вы можете иметь ul и li!

> <li class="n-2">Academic
>                 <ul>
>                     <li class="n-5">Staff</li>
>                     <li class="n-6">Courses</li>
>                 </ul> 
> </li>

у меня только есть: 

 <ul id="sortable" class="connectedSortable">
    <li id='1' class="ui-state-default"><span> stuff ...</span></li>
    <li id='3' class="ui-state-default"><span> stuff ...</span></li>
    <ul id="sortable" class="connectedSortable">
         <li id='1' class="ui-state-default"><span> stuff ...</span></li>
         <ul id="sortable" class="connectedSortable">     
                <li id='4' class="ui-state-default"><span> stuff ...</span></li>   
         </ul>
    </ul>
    <li id='2' class="ui-state-default"><span> stuff ...</span></li>  
</ul>

в моей функции jquery У меня это в начале: 

start: function(event,ui)
      {
     $(this).find('li').next().not('ul').after('<ul id="sortable" class="connectedSortable"><li class="hiddenli" style="height:0.1em;"></li></ul>');        
    $(this).sortable('refresh');
       }

Так что я управляю вашей версией для работыс моим списком ^^, но я получаю, я также получаю зону сброса после моего текущего элемента, который я перетаскиваю, так что я могу поместить li в качестве детей, но так как родитель - это элемент, который я перетаскиваю, это невозможнокак удалить

создание после моего элемента, я перетаскиваю, и это вызывает событие запуска!

Что касается обновления сортировки, которое я попытался и не смог с помощью serialize, не знаю, как получить вопрос, и это дети, и правильно его упорядочить. Я не знаю, куда был отброшен мой

(какой родительимеет, и если он находится в списке с другим li, в каком месте он находится, потому что, как вы можете видеть на скриншоте, я получил номер для каждого элемента (1-2-3-4), последний представляет порядок в спискеу которого родительский идентификатор = 3, вы видите, я пытался в течение нескольких дней :(
0 голосов
/ 30 июля 2010

Мне удалось обойти, если кому-то интересно ....

вместо опций «конец» и «конец» я использовал начало и конец. 

start: function(event,ui)
       {
           $(this).find('li').not(':has(ul)').append('<ul><li></li></ul>');
           $(this).sortable('refresh');
       } ,
stop:  function(event,ui)
       {
           $(this).find('li:empty').remove();
           $(this).find('ul:empty').remove();
           $(this).sortable('refresh')
       }

Если у кого-то есть лучшее решение, пожалуйста, дайте нам знать ...

...