web-dev-qa-db-fra.com

jQuery Draggable and overflow issue

J'ai un effet indésirable lorsque je fais glisser un div à partir d'un div de conteneur défini comme débordement: faites défiler.

J'ai trouvé un exemple de quelqu'un d'autre où il a eu le problème mais je n'ai pas pu trouver de solution

Exemple sur le bac de collage

Ce qui se passe, c'est que le défilement est juste augmenté, je peux voir pourquoi ce serait le comportement souhaité si vous vouliez faire glisser vers une destination dans le div défilable mais je veux pouvoir le prendre en dehors de sa portée de défilement.

jquery-uidrag-and-drop
73
Phill Duffy

Il vaut certainement la peine de faire attention à la documentation

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

scroll

Type: Booléen
Par défaut: true
S'il est défini sur true, le conteneur défile automatiquement pendant le glissement.

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

34
Phill Duffy

J'ai eu un problème similaire en activant un glissement entre deux divs de débordement-auto. À l'aide des réponses précédentes, j'ai trouvé que cette combinaison fonctionne pour moi (Safari 5.0.3, jquery-1.4.4, jquery-ui-1.8.7):

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

ajouter à

Élément, SelectorDefault: "parent"

L'élément transmis à ou sélectionné par l'option appendTo sera utilisé comme conteneur de l'assistant glissable pendant le glissement. Par défaut, l'assistant est ajouté au même conteneur que le draggable.

Exemples de code Initialisez un objet déplaçable avec l'option appendTo spécifiée.

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

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

Premièrement: le clone est ajouté au corps. En fonction de votre css, votre élément peut changer les styles, car avant qu'il ne commence, il se trouve à l'intérieur d'un autre élément et lors du glissement, il sera directement sur l'élément body.

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

Ainsi, la solution à ce problème est:

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

La définition de l'option de défilement n'empêche pas les enfants d'être cachés dans la zone de débordement. J'ai proposé un work-a-round qui utilise l'option d'assistance. Vérifiez-le:

http://Pastebin.me/164f0a4073496563fe3179ddcec5fd6d

Voici également une référence à un autre post que j'ai fait:

jquery ui draggable elements not 'draggable' outside of scrolling div

2
Justin Bull