jquery sortable 不能拖到手风琴之外

发布于 2024-08-17 02:44:42 字数 1884 浏览 7 评论 0原文

我有 2 个相连的可排序列表。一个在手风琴里面。当我尝试从手风琴中的可排序项中拖动项目时，一旦我离开手风琴，助手就会消失。我可以拖放到其他连接的可排序项之一，该项目将显示，但在我拖动时它不会显示。如果我向下拖动项目，手风琴也会向下滚动。

我可以拖动&从另一个列表中的任何一个我需要的地方删除项目，它工作正常。如何使项目在从手风琴内部拖动到外部时不会消失？

我已经尝试过遏制选项，但这似乎没有效果。

下面是暴露我从这些示例中获取的问题的代码： http://jqueryui. com/demos/sortable/#connect-lists

我希望能够将项目从手风琴拖到可排序列表中。我实际上可以将它们放入列表中，但是当我将它们拖到手风琴外面时它们会消失。

<html>
<head>

<title>Accordion Sortable Failure Test</title>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.7.2.custom.css" rel="stylesheet"/>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript">
$(function(){
    $(".sortable").sortable({connectWith: ".sortable"});
    $("#accordion").accordion({ header: "h3" });
});
</script>

</head>

<body>

<h2>Sortable</h2>
<ul class="sortable">
    <li>Row 1</li>
    <li>Row 2</li>
</ul>

<h2>Accordion</h2>
<div id="accordion">
    <div>
        <h3><a href="#">First</a></h3>
        <ul class="sortable">
            <li>Lorem</li>
            <li>ipsum</li>
            <li>dolor</li>
        </ul>
    </div>
    <div>
        <h3><a href="#">Second</a></h3>
        <div>Phasellus mattis tincidunt nibh.</div>
    </div>
    <div>
        <h3><a href="#">Third</a></h3>
        <div>Nam dui erat, auctor a, dignissim quis.</div>
    </div>
</div>

</body>
</html>

原文

I have 2 connected sortable lists. One is inside an accordion. When I try to drag items from the sortable in the accordion, the helper disappears as soon as I get outside of the accordion. I can drop to one of the other connected sortables and the item will display, but it just doesn't display while I'm dragging. The accordion also scrolls down if I drag and item down.

I can drag & drop items from either of the other list wherever I need and it works fine. How can I make items not disappear while dragging them from inside an accordion to the outside of it?

I've already tried the containment option but that seems to have no effect.

Here's code to expose the problem that I've taken from these examples: http://jqueryui.com/demos/sortable/#connect-lists

I want to be able to drag items from the accordion into the sortable list. I can actually drop them into the list, but they disappear while I'm dragging them outside of the accordion.

<html>
<head>

<title>Accordion Sortable Failure Test</title>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.7.2.custom.css" rel="stylesheet"/>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript">
$(function(){
    $(".sortable").sortable({connectWith: ".sortable"});
    $("#accordion").accordion({ header: "h3" });
});
</script>

</head>

<body>

<h2>Sortable</h2>
<ul class="sortable">
    <li>Row 1</li>
    <li>Row 2</li>
</ul>

<h2>Accordion</h2>
<div id="accordion">
    <div>
        <h3><a href="#">First</a></h3>
        <ul class="sortable">
            <li>Lorem</li>
            <li>ipsum</li>
            <li>dolor</li>
        </ul>
    </div>
    <div>
        <h3><a href="#">Second</a></h3>
        <div>Phasellus mattis tincidunt nibh.</div>
    </div>
    <div>
        <h3><a href="#">Third</a></h3>
        <div>Nam dui erat, auctor a, dignissim quis.</div>
    </div>
</div>

</body>
</html>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

雨后咖啡店 2024-08-24 02:44:42

在可排序调用中，您需要使用以下选项：

helper: "clone", appendTo: "body", // 或您希望辅助克隆附加到的任何元素

这有两件事。首先，它复制被拖动的元素（helper 选项），其次，它将该 helper 附加到指定的元素（appendTo 选项）。

类似的问题在这里：jQuery-Ui：无法将对象拖动到手风琴之外

回复收藏 0 原文

就是爱搞怪 2024-08-24 02:44:42

我知道我有点晚了，但我对两个可排序的手风琴也遇到了类似的问题，您可以在两个手风琴之间拖放项目。

因此，供将来参考：

我也无法让手风琴项目“走出”源手风琴，谷歌引导我提出了这个问题。

我通过在 sortable() 函数上添加 axis: undefined 解决了我的问题：

        $("#accordion1")
        .accordion({
            collapsible: true,
            header: "> div > h3",
            dropOnEmpty: true,
            autoHeight: false,
            active: false
        })
        .sortable({
            axis: "y",
            handle: "h3",
            stop: function() {
                stop1 = true;
            },
            connectWith: '.connectedSortable',
            helper: 'clone',
            axis: undefined
        });

现在可以将手风琴项目拖动到各处。

I'm a little late, I know, but I had a similar problem with two sortable accordions where you can drag&drop items between the two accordions.

So, for future reference:

I also couldn't get the accordion-items to "go out" of the source-accordion, and google led me to this question.

I solved my problem by adding axis: undefined on the sortable() function:

        $("#accordion1")
        .accordion({
            collapsible: true,
            header: "> div > h3",
            dropOnEmpty: true,
            autoHeight: false,
            active: false
        })
        .sortable({
            axis: "y",
            handle: "h3",
            stop: function() {
                stop1 = true;
            },
            connectWith: '.connectedSortable',
            helper: 'clone',
            axis: undefined
        });

Now the accordion-items can be dragged all over the place.

回复收藏 0 原文