J'ai configuré le glisser-déposer jQuery d'un div à un autre div et cela fonctionne très bien.

Cependant, la source div dépasse parfois la hauteur de l'écran, j'ai donc dû lui ajouter une barre de défilement verticale. C'est là que je rencontre des problèmes avec le tristement célèbre problème de débordement.

Le div doit avoir overflow-x: visible pour que les éléments glissés soient visibles lorsqu'ils sont déplacés vers le div cible. Mais, lorsque j'ajoute overflow-y: scroll ou overflow-y: auto à la div source, soudainement overflow-x ne fonctionne plus.

Je suis allé à W3 et à quelques questions sur StackOverflow, et je me rends compte que ce n'est pas un bug mais un comportement prévu (bien que POURQUOI cela était prévu me dépasse). Cependant, je n'ai pas trouvé de solution qui fonctionne pour moi.

J'ai essayé d'ajouter un div wrapper à la div source comme certaines réponses suggérées, puis de procéder comme suit:

.wrapper {
    width: 100px;
    position: absolute;
    top: 4vw;
    left: 0;
    bottom: 4vw;
    overflow-y: auto;
}

.source {
    position: relative;
    overflow: visible;
    z-index: 2;
}

<div class="wrapper">
    <div class="source">
        <!-- draggable elements go here -->
    </div>
</div>

<div class="target">
    <!-- draggable elements drop here -->
</div>

Mais, bien que le débordement du div source soit correct maintenant, le wrapper cache toujours le débordement horizontal. Je suppose que je pourrais augmenter la largeur du wrapper en plein écran et rendre l'arrière-plan invisible et que tout le reste à l'écran ait un index z plus élevé afin de ne pas être derrière le wrapper, mais cela semble être une solution ridiculement mauvaise pour un tel question simple.

Quelqu'un peut-il m'aider?

Si une solution CSS n'est pas pratique, quelqu'un peut-il offrir un morceau de Javascript qui pourrait résoudre le problème?

Exemple de code: jsfiddle

0
jovan 8 août 2016 à 13:50

3 réponses

Meilleure réponse

S'il vous plaît vérifier les points suivants. Si vous souhaitez faire glisser des éléments et les "déposer" sur vos positions de combat , vous pouvez utiliser helper: "clone" en combinaison avec appendTo: "body" ou tout autre sélecteur où se trouvent vos objets. sera supprimé. J'ai également ajouté containment: 'window' et scroll: false (pas trop sûr si ce dernier est ce que vous voulez).

function make_draggable(elem){
    $(elem).draggable({
        revert: "invalid",
        cursor: "move",
        helper: 'clone',
        appendTo: 'body',
                    containment: 'window',
        scroll: false,
    });
}

Il y a également eu quelques corrections CSS afin que vos styles s'appliquent toujours aux clones déplaçables et que votre corps couvre en fait toute la zone (puisque votre seul enfant est positionné en absolu, nous devons donc forcer body à couvrir toute la hauteur / largeur) )

https://jsfiddle.net/9ush466w/6/

EDIT: ajouter une classe personnalisée et la supprimer sur l'élément d'origine afin que vous puissiez afficher des commentaires à l'utilisateur. https://jsfiddle.net/9ush466w/8/

2
Juan Ferreras 11 août 2016 à 12:02

Essayez ce correctif. J'ai édité votre fonction voir ci-dessous. J'ai ajouté l'option "confinement" sur draggable.

function make_draggable(elem){
        $(elem).draggable({
            revert: "invalid",
            cursor: "move",
            containment: ".unit-holder-middle" 
        });
    }

C'est ce que tu veux? voir ce jsfiddle https://jsfiddle.net/9ush466w/2/

0
Edang Jeorlie 11 août 2016 à 11:23

Je sais que ce n'est pas exactement une réponse à votre question, mais vous faites glisser les éléments. En regardant votre échantillon, je pense que vous devriez regarder dans les listes de connexion:

documentation des listes de connexion jqueryui

Cela vous permet de prendre un élément d'une liste et de le déposer dans une autre.

Voici une démo jsfiddle que j'ai trouvée:

connectez les listes de démonstration de violon

0
Ruben Pirotte 11 août 2016 à 10:35