1

Estou desenvolvendo uma aplicação one eu tenho 2 listas com droppable areas e um side menu com draggable itens.

Quando eu uso o scroll a posição do item que estou arrastando é alterada adicionando o movimento do scroll.

Eu tentei aplicar o que encontrei nesse tópico: https://stackoverflow.com/questions/5791886/jquery-draggable-shows-helper-in-wrong-place-after-page-scrolled mas ou eu estou aplicando errado ou não está funcionando mesmo.

Eu também tentei esse: http://jsfiddle.net/7AxXE/ mas é mostrado um erro dizendo que "draggable is not a function".

Aqui vcs podem acessar um exemplo da minha aplicação e simular o erro:

https://denisorlandidesouza.outsystemscloud.com/Test/

Clicando no botão "Ok" no topo à direita será mostrado um side menu, quando arrastar o item para a área principal e usar o scroll você verá o comportamento.

1 Resposta 1

0
+200

O seu jsfindle esta funcionando, o unico problema 'e que vc nao colocou nenhum evento para mostrar que o drag and drop funciona visualmente.

Acredito que vc precisa de algo assim:

$('.item').draggable({
    cursor: 'pointer',
    snap: '#itens',
    revert: 'invalid',
    scroll: false,
});

$('#itens2').droppable({
    accept: '.item',
    drop: function(e, ui) {
        $(this).append(ui.draggable.css('position','static'));
    }
});

$('#itens').droppable({
    accept: '.item',
    drop: function(e, ui) {
        $(this).append(ui.draggable.css('position','static'));
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

<ul id="itens" style="width: 100px; height: 100px; border:1px solid black;">
  <li class="item">Item 1</li>
  <li class="item">Item 2</li>
  <li class="item">Item 3</li>
  <li class="item">Item 4</li>
  <li class="item">Item 5</li>
</ul>

<ul id="itens2" style="width: 100px; height: 100px; border:1px solid black;">
</ul>

2
  • o jsfindle era só um exemplo do que eu estava tentando implementar. Ele na verdade não é meu. Deixei um exemplo da minha aplicação aqui: denisorlandidesouza.outsystemscloud.com/Test Vou tentar implementar o que você sugeriu. Obrigado.
    – Denis
    Commented 15/08/2019 às 11:05
  • @Denis entao coloque codigo do que vc esta tentando fazer na sua aplicacao na sua pergunta. Se minha resposta responde sua duvida nao esqueca de marcar como respondido.
    – HudsonPH
    Commented 16/08/2019 às 7:02

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 .