Сортируемый JQuery не может быть перетащен за пределы аккордеона - PullRequest
Новая
       33

Сортируемый JQuery не может быть перетащен за пределы аккордеона

1 голос
/ 11 января 2010

У меня есть 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>

Ответы [ 3 ]

2 голосов
/ 08 июля 2011

В вашем сортируемом вызове вы хотите использовать следующие опции:

helper: "clone", appendTo: "body", // or whatever element you want the helper clone to be attached to

Это делает две вещи. Сначала он создает копию перетаскиваемого элемента (опция помощника), а затем присоединяет этот помощник к указанному элементу (опция appendTo).

Подобный вопрос здесь: jQuery-Ui: Невозможно перетащить объект за пределы аккордеона

1 голос
/ 21 октября 2010

Я немного опоздал, я знаю, но у меня была похожая проблема с двумя сортируемыми аккордеонами, где вы можете перетаскивать предметы между двумя аккордеонами.

Итак, для дальнейшего использования:

Я также не смог заставить гармошку "выйти" из исходного аккордеона, и Google привел меня к этому вопросу.

Я решил свою проблему, добавив ось: undefined в функцию sortable (): 

        $("#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
        });

Теперь предметы для аккордеона можно перетаскивать повсюду.

0 голосов
/ 11 января 2010

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

...