jQuery connectToSortable嵌套列表和贪婪选项 [英] jQuery connectToSortable Nested Lists and Greedy Option

问题描述

一段时间以来，我一直在尝试解决connectToSortable和嵌套列表的问题.我在jsfiddle创建了一个示例，该示例显示了基本代码:

I've been trying to resolve an issue for some time with connectToSortable and nested lists. I've created an example at jsfiddle that shows the basic code:

http://jsfiddle.net/ZYSYM/

我想要实现的是用户能够将新项目"从右侧列表拖到子项目列表中的能力.但是，问题在于它会将项目添加到子列表和父列表中.

What I would like to achieve is the ability for a user to drag a "New Item" from the right list into the sub items list. However, the issue is that it adds the item to both the sub and parent lists.

我已经读过，也许Greedy选项可以解决这个问题，但是我不确定它是否正常工作，或者我误解了它的工作方式.我已经在Google上搜索和搜索，但是找不到任何人遇到完全相同的问题.

I've read that perhaps the Greedy option may resolve this, however I'm not sure if it's working correctly or I've misinterpreted how it's meant to work. I've googled and searched around but could not find anyone with the exact same issue.

我还执行了一些调试，并且greedy选项在jquery-ui中触发了行parentInstance._out.call(parentInstance, event);，我认为这是出于此目的，但似乎没有任何影响.

I've also performed some debugging and the greedy option fires the line parentInstance._out.call(parentInstance, event); in jquery-ui, which I think is for this purpose, but it doesn't seem to have any affect.

我不是jQuery方面的专家，因此非常感谢您的帮助.也许我错过了一些简单的事情，或者有更好的方法呢?

I'm not an expert in jQuery so any help is greatly appreciated. Perhaps I've missed something simple or there's a better way of doing this?

谢谢，如果您需要任何其他信息，请告诉我.

Thanks and please let me know if you require any further information.

推荐答案

这比简单的情况要难一些: HTML:

This is little trickier than simple cases: The 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:

The 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: '' });     
    }
});

您可以在这里看到结果:

You can see the result here:

http://jsfiddle.net/F3nck/

应收款项: 我找到了解决方案，并根据以下示例对您的示例进行了调整: http://boagworld.com/technology/creating-a-draggable- sitemap-with-jquery/

Credit due: I found the solution and adapted to your example from: http://boagworld.com/technology/creating-a-draggable-sitemap-with-jquery/

这篇关于jQuery connectToSortable嵌套列表和贪婪选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！