jQuery Déplaçable problème de débordement

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 saisir.

InformationsquelleAutor Phill Duffy | 2009-05-01
  1. 95

    J'ai eu un problème similaire permettant un glissement entre les deux trop-plein automatique de divs. Avec l'aide de la réponse à la question précédente, j'ai trouvé que cette combinaison qui fonctionne pour moi (Safari 5.0.3, jquery 1.4.4, jquery-ui-1.8.7):

    appendTo: 'body',
containment: 'window',
scroll: false,
helper: 'clone'
    • pour moi, même juste helper: "clone" à lui seul résoudre le problème
    • année de l'aide a fonctionné pour moi aussi (sur son propre)
    • Booya, je suis à la faire glisser.
    • si je comprend uniquement helper:clone, il travaille, l'un des les autres, c'est tout gâcher! merci pour le commentaire.
    • merci beaucoup, vous avez sauvé ma journée
    • 2015 et cette réponse encore des pierres!
    • oh ps, je suis en utilisant ce angulaire et il fonctionne toujours comme suit: données jqyoui-options="{ appendTo: "corps", le confinement: 'window', faites défiler jusqu': false, helper: 'clone' }"
    • C'est ce que je suis à la recherche pour merci il fonctionne très bien.

    InformationsquelleAutor marks_
  2. 56

    appendTo

    Élément, SelectorDefault: "parent"

    L'élément passé ou sélectionnés par le appendTo option sera utilisée comme déplaçable helper du conteneur pendant le déplacement. Par défaut, le programme d'assistance est annexée à la même conteneur comme le déplaçable.

    Exemples de Code
    Initialiser un déplaçable avec le appendTo option spécifiée.

    $('.selector').draggable({ appendTo: 'body' });
    • J'ai essayé de faire comme vous le suggérez, mais il n'est pas le changer pour le comportement désiré, lorsque vous ajoutez le code que vous avez mentionné dans l'exemple de la Pâte, de la corbeille de la page, ça marche pour vous? Merci
    • ouais, je suis totalement d'échouer sur cette question. J'ai joué avec elle pendant une heure. Le mieux que je puisse obtenir est de savoir comment je l'ai laissé, déplaçables à la souris ne fonctionne pas avec trop-plein 🙁
    • Pas de soucis, je vous remercie de votre effort! 🙂
    • +1 Cela a fonctionné pour moi.
    • Oui, vous venez d'enregistrer des heures et mon humiliation de demander les locaux de hot shot!
    • les chances sont que le local hotshot obtient juste son info ici de toute façon.
    • Local hotshot ici, je peux confirmer que je reçois tous mes renseignements de StackOverflow.
    • Cela a fonctionné pour moi! +1

    InformationsquelleAutor Chad Grant
  3. 33

    Il paie certainement de prêter attention à la documentation

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

    de défilement

    Type: Boolean

    Par défaut: true

    Si la valeur true, conteneur défile automatiquement tout en faisant glisser.

    Tous ceux qui entrez ici, d'apprendre de mon erreur, RT(F)M!!!

    • gaspillage de 2 heures, en effet. Nous devrions vraiment RTFM
    • J'ai eu un problème similaire avec un accordéon. J'ai eu un déplaçable à l'intérieur d'un panneau accordéon et je voulais le faire glisser en dehors de l'accordéon, mais le panneau accordéon a 'débordement' à la valeur 'auto' et je n'ai jamais réussi à obtenir en dehors de l'accordéon. Réglage du défilement: false," à l'accordéon, na pas aider. Au final, j'ai annulé le débordement de l'ensemble de jquery ui. Ceci fait de la hauteur de mon panneau de contenu a l'air étrange, j'ai donc eu du fil à une hauteur donnée. Et ça a fonctionné.
    InformationsquelleAutor Phill Duffy
  4. 19

    Le clone de la solution, il fonctionne, mais a deux problèmes.

    Première: le clone sont ajouter pour le corps. En fonction de votre style css, votre élément peut modifier les styles, depuis avant qu'il ne commence, c'est à l'intérieur d'un autre élément et au cours de ce déplacement, il sera directement sur le corps de l'élément.

    Deuxième: Parfois, l'élément DOIT se déplacer, et le clone de laisser l'objet là.

    Donc, la solution de ces problèmes est:

    $('.selector').draggable({
    helper: 'clone',
    start: function(){
        $(this).hide();             
    },
    stop: function(){
        $(this).show()
    }
});
    • Parfait! Et merci pour l'astuce sur le css m'a aidé à résoudre ces deux problèmes.
    • Vraiment imiter Déplaçable est "original" comportement, vous préférez utiliser la propriété CSS "visibilité"
    • Tout simplement GÉNIAL!
    • merci, fonctionne
    InformationsquelleAutor Bruno Guaitanele
  5. 2

    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

    Est également ici une référence à un autre post j'ai fait:

    jquery ui déplaçable éléments pas "déplaçable" en dehors de défilement div

    InformationsquelleAutor Justin Bull
  6. -1

    Vous pouvez également spécifier les types d'éléments que vous ne souhaitez pas inclure.

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

    Appliquer cette propriété annuler pour ignorer l'événement spécifié les éléments enfants

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