jQuery Draggable e problema de estouro [fechado]

Question

Estou tendo um efeito indesejado quando eu arrastar um div de uma div recipiente que é definida como overflow:. Rolagem

Eu encontrei um exemplo de alguém onde eles tiveram o problema, mas eu fui incapaz de encontrar uma resolução

Exemplo de Bin Colar

O que acontece é que a rolagem é apenas aumentou, eu posso ver por que isso seria o comportamento desejado se você queria arrastar para um destino dentro do div de rolagem, mas eu quero ser capaz de levá-la fora de seu alcance rolagem.

Answer 1

É certamente vale a pena prestar atenção a documentação

http://docs.jquery.com/UI/Draggable#option-scroll

rolagem

Tipo: booleana
Padrão: true
Se definido como true, recipiente auto-pergaminhos enquanto arrasta.

Todos os que entram aqui, aprender com o meu erro, RT (F) M !!!

Answer 2

Eu tive um problema semelhante permitindo um arrasto entre dois divs overflow-auto. Com a ajuda das respostas anteriores, achei que esta combinação funciona para mim (Safari 5.0.3, jquery-1.4.4, jquery-ui-1.8.7):

appendTo: 'body',
containment: 'window',
scroll: false,
helper: 'clone'

Answer 3

appendTo

Element, SelectorDefault: 'pai'

O elemento passado para ou selecionados pela opção appendTo será utilizado como recipiente do auxiliar draggable durante arrastando. Por padrão, o ajudante é anexado ao mesmo container do draggable.

Exemplos de código Inicializar um draggable com a opção appendTo especificado.

$('.selector').draggable({ appendTo: 'body' });

Answer 4

A solução clone ele funciona, mas tem dois problemas.

Primeiro: o clone são anexar ao corpo. Dependendo do seu css, o elemento pode alterar os estilos, desde antes de ele começa, ele está dentro de outro elemento e durante o arrasto, será diretamente no elemento do corpo.

Em segundo lugar:. Às vezes, o movimento elemento deve, eo clone deixar o objeto existe

Assim, a solução para este problema é:

$('.selector').draggable({
    helper: 'clone',
    start: function(){
        $(this).hide();             
    },
    stop: function(){
        $(this).show()
    }
});

Answer 5

Definir a opção de rolagem não parar as crianças de serem escondidos na área de excedentes. Eu vim com uma obra-a-redonda que utiliza a opção ajudante. Confira:

http://pastebin.me/164f0a4073496563fe3179ddcec5fd6d

Também aqui é uma referência a outro post que fiz:

jQuery UI arrastáveis ??não elementos fora 'draggable' de rolagem div

Answer 6

Você também pode especificar que tipos de elementos que você não deseja incluir.

<div class="draggable"> 
    <h2>This will drag the div</h2>
    <ul>
       <li>This won't drag the div</li>
    </ul>
</div>

Aplicar esta cancelar propriedade para ignorar o evento em elementos filho especificados

$('.draggable').draggable({cancel : 'ul'});