Problème jQuery déplaçable et dépassé [fermé]

StackOverflow https://stackoverflow.com/questions/811037

  •  03-07-2019
  •  | 
  •  

Question

Je ressens un effet indésirable lorsque je déplace un div d'un conteneur div défini en débordement: scroll.

J'ai trouvé un exemple de quelqu'un qui a eu le problème mais je n'ai pas trouvé de solution

Exemple sur le bac collé

Ce qui se passe, c’est que le défilement est juste augmenté, je peux comprendre pourquoi il s’agirait du comportement souhaité si vous vouliez faire glisser le curseur vers une destination dans le div à défilement, mais je veux pouvoir le sortir de son cadre.

Était-ce utile?

La solution 3

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

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

  

faire défiler

     

Type: Booléen

   Par défaut: true
  Si défini sur true , le défilement automatique du conteneur s'effectue lors du déplacement.

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

Autres conseils

J'ai eu un problème similaire en permettant un glissement entre deux divs auto-débordement. À 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'

appendTo

Elément, SelectorDefault: 'parent'

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

Exemples de code Initialiser un objet glissable avec l'option appendTo spécifiée. 

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

La solution de clonage fonctionne, mais présente 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 se trouvera directement sur l'élément body.

Deuxièmement: Parfois, l'élément DOIT être déplacé et le clone y laisse l'objet.

La solution à ce problème est donc la suivante: 

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

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. Je suis venu avec un travail-a-round qui utilise l'option d'aide. Découvrez-le:

http://pastebin.me/164f0a407349659fe3179ddcec5fd6d / p>

Voici également une référence à un autre message que j'ai publié:

jquery ui draggable elements not "déplaçable" en dehors du défilement div

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>

Appliquez cette propriété cancel pour ignorer l'événement dans les éléments enfants spécifiés 

$('.draggable').draggable({cancel : 'ul'});
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top