Вложенные списки jQuery connectToSortable и опция Greedy - PullRequest
Новая
       0

Вложенные списки jQuery connectToSortable и опция Greedy

0 голосов
/ 15 сентября 2011

Я пытался решить проблему в течение некоторого времени с помощью connectToSortable и вложенных списков.Я создал пример в jsfiddle, который показывает базовый код:

http://jsfiddle.net/ZYSYM/

Чего я хотел бы добиться, так это способности пользователя перетаскивать «Новый элемент» изправый список в список подпунктов.Однако проблема заключается в том, что он добавляет элемент как в дочерний, так и в родительский списки.

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

Я также выполнил некоторую отладку, и жадная опция запускает строку parentInstance._out.call(parentInstance, event); в jquery-ui, что, я думаю,для этой цели, но, похоже, это не имеет никакого влияния.

Я не эксперт в jQuery, поэтому любая помощь очень ценится.Возможно, я пропустил что-то простое или есть лучший способ сделать это?

Спасибо и, пожалуйста, дайте мне знать, если вам нужна дополнительная информация.

1 Ответ

0 голосов
/ 25 сентября 2011

Это немного сложнее, чем простые случаи: HTML: 

<div style="float: left;">
    <ul id="list_1">
        <li>Existing 1</li>
        <li>Existing 2</li>
        <li>
            <ul id = "list_2">
                <li><dl> <dt>Existing Sub 1</dt></dl></li>
                <li>Existing Sub 2</li>
                <li>Existing Sub 3</li>
                <li>Existing Sub 4</li>
            </ul>
        </li>
        <li>Existing 3</li>
        <li>Existing 4</li>        
    </ul>
</div>

<div style="float: right; margin-top: 30px;">
    <ul id="from_list">
        <li class="new_item">New Item 1</li>
        <li class="new_item">New Item 2</li>
        <li class="new_item">New Item 3</li>
        <li class="new_item">New Item 4</li>
    </ul>
</div>

CSS: 

#list_1 .dropzone {
    background-color: #FFFFFF;
    border-bottom: 4px solid #FFFFFF;
    height: 6px;
}

Javascript: 

var selector = '#list_1, #list_2';

$('#list_1 li').prepend('<div class="dropzone"></div>');

$('#list_1 li, #from_list li').draggable({    
    opacity: .8,    
     handle: ' > dl',
    addClasses: false,     
    helper: 'clone',     
    zIndex: 100 }                                        
);

$('#list_1 .dropzone').droppable({
    accept: '#from_list li',     
    tolerance: 'pointer',     
    drop: function(e, ui) {         
        var li = $(this).parent();         
        var child = !$(this).hasClass('dropzone');         
        //If this is our first child, we'll need a ul to drop into.         
        if (child && li.children('ul').length == 0) {             
            li.append('<ul/>');         
        }         
        //ui.draggable is our reference to the item that's been dragged.         
        if (child) {             
            li.children('ul').append(ui.draggable);         
        }         
        else {             
            li.before(ui.draggable);         
        }         
        //reset our background colours.         
        li.find('dl,.dropzone').css({ backgroundColor: '', borderColor: '' });     
    },     
    over: function() {         
        $(this).filter('dl').css({ backgroundColor: '#ccc' });         
        $(this).filter('.dropzone').css({ borderColor: '#aaa' });     
    },     
    out: function() {         
        $(this).filter('dl').css({ backgroundColor: '' });         
        $(this).filter('.dropzone').css({ borderColor: '' });     
    }
});

Результат вы можете увидеть здесь:

http://jsfiddle.net/F3nck/

Кредит подлежит оплате: Я нашел решение и адаптировался к вашему примеру из: http://boagworld.com/technology/creating-a-draggable-sitemap-with-jquery/

...