JQuery faisant glisser le parent externe

Je suis à l'aide de JQuery draggable(); faire li éléments déplaçables. Le seul problème, c'est lorsque l'élément est déplacé à l'extérieur de ses parents, il n'apparaît pas. C'est, il ne laisse pas les limites de sa div parent. Un exemple est ici: http://imgur.com/N2N1L.png - c'est comme si le z-index pour tout le reste a une plus grande priorité (et l'élément glisse sous tout).

Voici le code:

$('.photoList li').draggable({ 
        distance: 20,
        snap: theVoteBar,
        revert: true,
        containment: 'document'
    });

Et le li éléments sont placés dans des DIVs comme ceci:

<div class="coda-slider preload" id="coda-slider-1">
    <div class="panel">
        <div class="panel-wrapper">
            <h2 class="title" style="display:none;">Page 1</h2>
            <ul class="photoList">
                <li>
                    <img class="ui-widget-content" src="photos/1.jpg" style="width:100px;height:100px;" />
                </li>
            </ul>
        </div>
    </div>

Je suis positif, le problème est qu'il ne laisse pas de son conteneur parent, mais je ne sais pas quoi faire pour le sortir.

N'importe quelle direction ou de l'aide serait GRANDEMENT apprécié!

source d'informationauteur Andy

  1. 19

    J'ai atterri sur cette page, avec exactement le même problème, et Brendan réponse m'a fait fermer. Réglage de la appendTo option n'a pas aider, mais j'ai pu résoudre mon problème en ajoutant overflow: visible à la mère de mon élément déplaçable. En fait, j'ai négligé d'en hériter caché quelque part dans la chaîne.

    Note de côté, il ressemble à ceci fonctionne parce que jQuery UI déplace l'élément déplaçable par définition dynamique de positionnement par rapport à la mère - c'était nouveau intel pour moi!

  2. 11

    J'ai eu également le même problème.

    Vous pouvez utiliser cette option

    de confinement: $('#divmain')

    helper: "clone"

    respectivement

    - de définir la limite de la zone de l'abandon de l'action

    - pour les spectacles visibles objet déplacé également à l'extérieur du div parent, mais à l'intérieur de #divmain

    exemple

    <div id="divmain">
  <div id="divparentdraggable">
    <div id="divdraggable"></div>
  </div>
  <div id="divparentdroppable">
    <div id="divdroppable"></div>
  </div>
</div>

    jquery code:

    $('divparentdraggable').draggable({ 
...
containment: $('#divmain'),
helper: 'clone',
...
});

    J'espère que cela aide quelqu'un.

  3. 9

    Ressemble à une combinaison de certains de ces a fait pour moi.

    Ensemble appendTo: 'body' et helper: 'clone'.
    De cette façon, un nouveau DOM-Objet sera créé en tant que enfant de l'organisme qui sera visible partout. De cette façon, vous pouvez faire glisser (et chute) partout où vous le souhaitez.

  4. 3

    Cela ressemble à une question css. Essayez de désactiver le revenir si il reste en place lorsque vous faites glisser à l'endroit où il est à moitié visible. Puis de jouer avec le z-index, etc dans Firebug et voir si vous pouvez l'obtenir à l'affiche. Il pourrait être une question css avec l'un des parents ul ou div avec 'overflow: hidden'.

  5. 2

    J'ai eu un problème similaire et résolu par la définition de l'option:

    appendTo: 'body'

    Le seul effet secondaire de ceci est que si vous avez des styles appliqués à l'élément basé sur le conteneur parent, ces styles ne seront pas présents sur le helper.