jquery sortable нельзя перетаскивать за пределы аккордеона

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

jquery accordion jquery-ui jquery-ui-sortable
person Matthew    schedule 11.01.2010    source источник

Ответы (3)


arrow_upward
2
arrow_downward

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

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

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

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

person Edyn    schedule 08.07.2011

arrow_upward
1
arrow_downward

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

Итак, на будущее:

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

Я решил свою проблему, добавив axis: 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
        });

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

person Frank Hansen    schedule 21.10.2010
comment
Ваша функция .sortable имеет axis: "y" в начале и axis: undefined в конце. Вы уверены, что это правильно? - person hamid; 27.01.2015

arrow_upward
0
arrow_downward

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

person Val    schedule 11.01.2010
comment
Я добавил исходный код. Можете ли вы предложить или дать ссылку на то, как определить, какое событие, на каком элементе, могло быть остановлено распространение? - person Matthew; 19.01.2010
comment
пожалуйста, взгляните на это: jqueryui.com/demos/accordion/#sortable должно помочь с вашим вещь, если вы хотите, чтобы аккордео можно было сортировать. с другой стороны, в сортируемом пользовательском интерфейсе вы должны взглянуть на помощника. например helper:'clone' поэтому добавьте следующее `$(.sortable).sortable({connectWith: .sortable,helper: 'clone'});` это покажет клон элемента, который вы перетаскиваете, когда перетаскивание запускается, а когда закончите, клон будет уничтожен , удерживает оригинал на цели перетаскивания - person Val; 29.01.2010