Problème jQuery déplaçable et débordé

Question

Je vais avoir un effet indésirable lorsque je fais glisser une div à partir d'un div conteneur qui est défini comme overflow: scroll.

J'ai trouvé un exemple de quelqu'un d'autre où elles ont eu le problème, mais j'ai été incapable de trouver une solution

Exemple sur la Pâte bin

Ce qui se passe est que le défilement est tout simplement augmenté, je peux voir pourquoi ce serait le comportement désiré si vous voulais faire glisser vers une destination à l'intérieur de la div scrollable mais je veux être en mesure de prendre à l'extérieur de son défilement en saisir.

Answer 1

J'ai eu un problème similaire permettant un glisser-déposer entre deux divs à débordement automatique. avec l'aide des réponses précédentes, j'ai trouvé que cette combinaison fonctionnait pour moi (safari 5.0.3, jquery-1.4.4, jquery-ui-1.8.7):

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

Merci!

Answer 2

ajouter à

Element, SelectorDefault: 'parent'

L'élément passé à ou sélectionné par l'option appendTo sera utilisé comme conteneur de l'assistant pouvant être déplacé lors du déplacement. Par défaut, l’assistant est ajouté au même conteneur que le glissable.

Exemples de code Initialisez un élément glissable avec l'option appendTo spécifiée.

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

Answer 3

Il est certainement utile de prêter attention à la documentation

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

Tous ceux qui entrent ici, apprennent de mon erreur, RT (F) M !!!

Answer 4

La solution de clonage ça marche, mais a deux problèmes.

Premièrement: les clones sont ajoutés au corps. En fonction de votre css, votre élément peut changer les styles, car avant de commencer, il se trouve à l'intérieur d'un autre élément et lors du déplacement, il sera directement sur l'élément body.

Deuxièmement: Parfois, l'élément DOIT se déplacer, et le clone laisse l'objet y rester.

Donc, la solution à ce problème est la suivante:

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

Answer 5

Réglage de l'option de défilement ne pas empêcher les enfants d'être caché dans le débordement de la zone. Je suis venu avec un travail-un-rond qui utilise l'aide de l'option. Check it out:

http://pastebin.me/164f0a4073496563fe3179ddcec5fd6d

Il y a aussi une référence à un autre post j'ai fait:

http://stackoverflow.com/questions/2098387/jquery-ui-draggable-elements-not-draggable-outside-of-scrolling-div/2099100#2099100