web-dev-qa-db-fra.com

Élément déplaçable caché à l'extérieur du conteneur

En utilisant jQuery UI, j'essaie de créer une interface avec deux conteneurs déroulants, chacun contenant de nombreux éléments déplaçables. L'utilisateur peut faire glisser un élément d'un conteneur à l'autre.

La fonction de suppression n'est pas un problème. Une fois déposé, l'élément est détaché et recréé au bon endroit sous son nouveau parent.

Mon problème est que l'élément déplaçable ne peut pas être affiché en dehors de son conteneur lorsque le conteneur a position:relative; appliqué , donc en faisant glisser, l'élément disparaîtra lorsqu'il sera déplacé en dehors des limites du conteneur.

Ce comportement par défaut est logique, car normalement l'utilisateur voudrait faire glisser un élément à l'intérieur de son conteneur. Comme solution de contournement, j'avais supposé que la solution serait d'utiliser la propriété glissable 'appendTo', qui, je pensais, déplacerait l'élément en dehors de son conteneur, mais malheureusement cela n'a pas semblé avoir eu d'effet.

DOM: (chaque vue est déroulante et chaque conteneur a la position: relative et est aussi grand qu'il doit l'être pour contenir tous les éléments)

BODY
    VIEW 1
        CONTAINER
            DRAGGABLE ELEMENTS
    VIEW 2
        CONTAINER
            DRAGGABLE ELEMENTS

Javascript:

$('div.card').draggable({
    appendTo: 'body',
    scroll: false //stops scrolling container when moved outside boundaries
});

Veuillez consulter JSFiddle pour une explication simplifiée du problème. Je ne voulais pas gonfler l'exemple avec du code largable, donc cela illustre simplement le problème de glissement. http://jsfiddle.net/Em7Ak/

Merci d'avance.

jquery-uijquery-ui-draggable
24
tomturton

Je ne sais pas si cela résoudra votre problème exact, mais je suis tombé sur cette question à la recherche de la même réponse et c'est ce que j'ai trouvé.

Dans les options de .draggable (), passez helper:'clone' pour créer automatiquement un clone de l'élément afin de pouvoir le faire glisser hors du conteneur. Et utilise appendTo:'body' pour le mettre à la fin du <body> tag. Donc dans mon cas, mes options ressemblent un peu à ceci, en ajoutant revert:'invalid' pour le faire revenir s'il n'est pas déposé dans un endroit valide:

jQuery(".myselector").draggable({
    helper: 'clone',
    revert: 'invalid',
    appendTo: 'body'
});
61
Paul

utilisez l'assistant "clone" et masquez l'élément tout en le faisant glisser et en le montrant à nouveau à l'arrêt.

$(".removalbe-recom").draggable({
    appendTo: "body",
    helper: "clone",
    revert: "invalid",
    cursor: "move",
    containment: "document",
    zIndex: 10000,
    scroll:false,
    start: function (event, ui) {
    $(this).hide();
    },
    stop: function (event, ui) {
        $(this).show();
    }
});
5
kavehmb

J'ai eu un problème similaire il y a quelques mois.

Mon besoin était de pouvoir utiliser le défilement automatique d'un grand conteneur à partir des autres

Voici ma question pour plus de détails, JqueryUI, faites glisser les éléments dans les cellules d'un div déroulant déroulant contenant un grand tablea

J'ai trouvé une solution de contournement. L'idée est d'ajouter le clone de l'élément au conteneur déroulant pendant le rappel de construction de l'assistant, puis d'ajouter l'assistant au corps à l'aide d'une fonction setTimeout après 1 ms. La position de l'assistant doit être mappée sur la position de la souris pour éviter tout problème de décalage.

Voici ma solution (JSFiddle semble être en panne maintenant, essayez-le plus tard si aucun code ne s'affiche dans les fenêtres): http://jsfiddle.net/QvRjL/134/

$('[id^="drag-"]').each(function() {
    $(this).draggable({
        opacity: 0.7,
        cursorAt: { top: 15, left: 50 },
        appendTo: 'body',
        containment: 'body',        
        scroll: true,
        helper: function(){ 
            //Hack to append the cartridge to the body (visible above others divs), 
            //but still belonging to the scrollable container  
            $('#container').append('<div id="clone" class="cartridge">' + $(this).html() + '</div>');   
            $("#clone").hide();
            setTimeout(function(){
                $('#clone').appendTo('body'); 
                $("#clone").show();
            },1);
            return $("#clone");
        }    
    });
});​
5
sdespont

Ajouter la position: absolue au style de carte:

div.card {
    position:absolute;
    width:100px; height:50px;
    border:1px black solid;
    background-color:orange;
    text-align:center; vertical-align:middle;
}
0
Saram