Question

我有以下设置：

<ul class='_lscolumn'>
    <li>column1
        <ul class='_lswindow'>
            <li>window1
                <ul class='_lslink'>
                    <li>link1</li>
                    <li>link2</li>
                </ul>
            </li>
            <li>window2</li>
            <li>window3
                <ul class='_lslink'>
                    <li>link3</li>
                    <li>link4</li>
                </ul>
            </li>
        </ul>
    </li>
    <li>column2
        <ul class='_lswindow'>
            <li>window4</li>
        </ul>
    </li>
    <li>column3
        <ul class='_lswindow'>
            <li>window5</li>
            <li>window6</li>
        </ul>
    </li>
</ul>

我想要的是能够将链接拖到窗口类，窗口拖到列。最后我会添加一个标签，窗口也需要能够拖动到标签。我正在尝试使用UI。我在www.linkshelf.com/jQuery/index.html设置了一个示例。窗口拖动按照我想要的方式工作，但是当我开始拖动链接时，布局会出错。任何人都知道我在这里做错了什么，以及我需要做些什么来拖动嵌套的UL？

如果我通过添加$（'_ column'）使列可排序.sortable（）;列按照他们应该的方式排序，但是窗口和链接都是bezerk ......

Answer 1

我为此工作了一个JSFiddle，我发现只要目标存在拖动到它就可以工作......

http://jsfiddle.net/gfosco/fJVMk/

看看它是如何工作的，你可以移动链接，它们不会出现窗口错误......

我添加了UL并更新了课程以获得最小高度，否则无处可删除链接。

JS：

$('._lswindow').each( function() {
    $(this).sortable( {
        connectWith: '._lswindow',
        cancel: '._lslink'
    }).disableSelection();
});

$('._lslink').each( function() {
    $(this).sortable( {
        connectWith: '._lslink' }).disableSelection();
});

CSS补充：

._lslink {
 min-height:20px;   
}

一个带有空链接容器的窗口的HTML片段：

    <ul class='_lswindow'> 
        <li>window4
            <ul class='_lslink'></ul>
        </li> 
    </ul>

如何在jQuery UI中拖动嵌套的UL？

1 个答案: