Elemento arrastável escondido fora do contêiner
Usando o jQuery UI, estou tentando criar uma interface com dois contêineres roláveis, cada um contendo muitos elementos arrastáveis. O usuário pode arrastar um elemento de um contêiner para o outro.
O recurso de descarte não é um problema. Quando descartado, o elemento é desanexado e recriado no lugar certo sob seu novo pai.
Meu problema é queo elemento arrastável não pode ser exibido fora de seu contêiner quando o contêiner tiverposition:relative;
aplicada, portanto, ao arrastar, o elemento desaparecerá quando for movido para fora dos limites do contêiner.
Esse comportamento padrão faz sentido, já que normalmente o usuário iria querer arrastar um elemento dentro de seu contêiner. Como uma solução alternativa, eu supus que a solução seria usar a propriedade arrastável 'appendTo', que eu achava que moveria o elemento para fora de seu contêiner, mas infelizmente isso não pareceu ter qualquer efeito.
DOM: (cada view é rolável e cada container tem posição: relative e é tão grande quanto precisa ser para conter todos os elementos)
BODY
VIEW 1
CONTAINER
DRAGGABLE ELEMENTS
VIEW 2
CONTAINER
DRAGGABLE ELEMENTS
Javascript:
$('div.card').draggable({
appendTo: 'body',
scroll: false //stops scrolling container when moved outside boundaries
});
Por favor, veja o JSFiddle para uma explicação simplificada do problema. Eu não queria inchar o exemplo com código droppable, então isso apenas ilustra o problema de arrastar.http://jsfiddle.net/Em7Ak/
Muito obrigado antecipadamente.