0

Estou desenvolvendo um accordion que cada item irá receber uma lista de accordion. Para ordenar dinamicamente os itens de cada accordion, estou utilizando jquery draggable. Para a primeira lista de accordion o jquery funciona perfeitamente. Porém, para a segunda lista o draggable do jquery não funciona.

3
  • 4
    Insira algum código para ajudar os membros entenderem o problema.
    – Ricardo
    Commented 18/06/2015 às 14:43
  • 1
    Poste seu código. Está usando o accept em seu Droppable ? Commented 18/06/2015 às 14:48
  • Para cada nó do accordion eu adiciono o código abaixo: $(".sortable").sortable({ revert: true, update: function () {...} }); $("#draggable").draggable({ connectToSortable: ".sortable", helper: "clone", revert: "invalid" }); Commented 23/06/2015 às 11:56

1 Resposta 1

-2
<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

    <script>
        $(function () {
            $(".sortable").sortable({
                connectWith: ".sortable",
                revert: true
            }).disableSelection();
        });
    </script>
</head>

<style>
    .ui-state-default{
        width: 350px;
        height: 90px;
    }
</style>

<body style="display: flex; gap:20px">

    <div class="sortable">
        <div class="ui-state-default">Item 1</div>
        <div class="ui-state-default">Item 2</div>
        <div class="ui-state-default">Item 3</div>
        <div class="ui-state-default">Item 4</div>
        <div class="ui-state-default">Item 5</div>
    </div>
    <div class="sortable">
        <div class="ui-state-default">Item 1</div>
        <div class="ui-state-default">Item 2</div>
        <div class="ui-state-default">Item 3</div>
        <div class="ui-state-default">Item 4</div>
        <div class="ui-state-default">Item 5</div>
    </div>

    <div class="sortable">
        <div class="ui-state-default">Item 1</div>
        <div class="ui-state-default">Item 2</div>
        <div class="ui-state-default">Item 3</div>
        <div class="ui-state-default">Item 4</div>
        <div class="ui-state-default">Item 5</div>
    </div>


</body>

</html>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .