web-dev-qa-db-fra.com

jQuery ui draggable elements not 'draggable' outside of scrolling div

J'ai de nombreux éléments (balises href flottantes) dans un div avec une hauteur/largeur définie, avec un défilement défini sur overflow: auto dans le CSS.

Voici la structure des divs:

<div id="tagFun_div_main">
<div id="tf_div_tagsReturn">
    <!-- all the draggable elements go in here, the parent div scolls -->
</div>
<div id=" tf_div_tagsDrop">
    <div id="tf_dropBox"></div>
</div></div>

les div parent, 'tf_div_tagsReturn' et 'tf_div_tagsDrop' vont finalement flotter côte à côte.

Voici le jQuery qui est exécuté après que tous les éléments 'draggable' ont été créés avec le nom de classe 'tag_cell',:

$(function() {
    $(".tag_cell").draggable({ 
        revert: 'invalid', 
        scroll: false,
        containment: '#tagFun_div_main'
    });
    $("#tf_dropBox").droppable({
        accept: '.tag_cell',
        hoverClass: 'tf_dropBox_hover',
        activeClass: 'tf_dropBox_active',
        drop: function(event, ui) {
            GLOBAL_ary_tf_tags.Push(ui.draggable.html());
            tagFun_reload();
        }
    });
});

comme je l'ai dit ci-dessus, les éléments déplaçables sont déplaçables dans div 'tf_div_tagsReturn', mais ils ne glissent pas visuellement en dehors de cette div parent. digne de noter, si je fais glisser l'un des éléments déplaçables et que je déplace la souris sur le div largable, avec l'ID 'tf_dropBox', alors la classe de survol est déclenchée, je ne vois plus l'élément déplaçable.

C'est ma première utilisation de jQuery, donc j'espère qu'il me manque quelque chose de super évident. J'ai lu la documentation et recherché les forums jusqu'à présent sans succès :(

MISE À JOUR:

un grand merci à Jabes88 pour m'avoir fourni la solution qui m'a permis d'atteindre la fonctionnalité que je cherchais. Voici à quoi ressemblait mon jQuery:

$(function() {
    $(".tag_cell").draggable({ 
        revert: 'invalid', 
        scroll: false,
        containment: '#tagFun_div_main',
        helper: 'clone',
        start : function() {
        this.style.display="none";
        },
        stop: function() {
        this.style.display="";
        }
    });
    $(".tf_dropBox").droppable({
        accept: '.tag_cell',
        hoverClass: 'tf_dropBox_hover',
        activeClass: 'tf_dropBox_active',
        drop: function(event, ui) {
            GLOBAL_ary_tf_tags.Push(ui.draggable.html());
            tagFun_reload();
        }
    });
});
jqueryuser-interfacedrag-and-dropscroll
35
Seth

Allez-vous autoriser plusieurs instances avec vos objets glissables? puis utilisez l'option helper and append:

$(".tag_cell").draggable({ 
  helper: 'clone',
  appendTo: 'div#myHelperHolder'
});

Ensuite, dans votre CSS, vous pouvez définir le zindex de div # myHelperHolder sur 999. Sinon, essayez simplement d'utiliser l'option zindex:

$(".tag_cell").draggable({ 
  zIndex: 999
});

J'envisagerais également de définir des addClasses pour empêcher le plugin d'ajouter toutes ces classes ennuyeuses qui gaspillent la vitesse du processeur.

MISE À JOUR: J'AI UNE NOUVELLE SOLUTION

D'accord, après avoir joué un peu avec, j'ai trouvé ceci: l'option de défilement n'empêche pas l'enfant d'être caché avec un débordement. J'ai lu d'autres articles et je ne trouve pas de solution unique. Mais je suis venu avec un peu de travail qui fait le travail.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
    google.load("jquery", "1.4.0");
    google.load("jqueryui", "1.7.2");   
    google.setOnLoadCallback(OnLoad);
    function OnLoad(){
        var dropped = false;
        $(".tag_cell").draggable({ 
            addClasses: false,
            revert: 'invalid',
            containment: '#tagFun_div_main',
            helper: 'clone',
            appendTo: '#tagFun_div_helper',
            start: function(event, ui) {
                dropped = false;
                $(this).addClass("hide");
            },
            stop: function(event, ui) {
                if (dropped==true) {
                    $(this).remove();
                } else {
                    $(this).removeClass("hide");
                }
            }
        });
        $("#tf_dropBox").droppable({
            accept: '.tag_cell',
            hoverClass: 'tf_dropBox_hover',
            activeClass: 'tf_dropBox_active',
            drop: function(event, ui) {
                dropped = true;
                $.ui.ddmanager.current.cancelHelperRemoval = true;
                ui.helper.appendTo(this);
            }
        });
    }
    </script>
    <style>
        div#tagFun_div_main { display:block; width:800px; height:400px; margin:auto; padding:10px; background:#F00; }
        div#tf_div_tagsReturn { display:block; width:200px; height:100%; float:left; overflow:auto; background:#000; }
        div#tf_div_tagsDrop { display:block; width:200px; height:100%; float:right; background:#0F0; }
        div#tf_dropBox { display:block; width:100%; height:250px; background:#F0F; }
        span.tag_cell { display:block; width:25px; height:25px; margin:1px; float:left; cursor:pointer; background:#0FF; z-index:99; }
        span.tag_cell.hide { display:none; }
        div#tf_dropBox.tf_dropBox_hover { background:#FFF !important; }
        div#tf_dropBox.tf_dropBox_active { background:#333; }
    </style>
</head>
<body>
    <div id="tagFun_div_main">
        <div id="tf_div_tagsReturn">
            <span class="tag_cell"></span>
            <span class="tag_cell"></span>
            <span class="tag_cell"></span>
            <span class="tag_cell"></span>
            <span class="tag_cell"></span>
            <span class="tag_cell"></span>
            <span class="tag_cell"></span>
            <span class="tag_cell"></span>
            <span class="tag_cell"></span>
            <span class="tag_cell"></span>
            <span class="tag_cell"></span>
        </div>
        <div id="tf_div_tagsDrop">
            <div id="tf_dropBox"></div>
        </div>
    </div>
    <div id="tagFun_div_helper">
    <!-- this is where the helper gets appended for temporary use -->
    </div>
</body>
</html>

J'ai collé tout mon code pour que vous puissiez l'essayer. Voici une brève description: lorsque vous commencez à faire glisser un élément, il masque l'original, le clone, puis ajoute le clone à un conteneur en dehors de la zone de débordement. Une fois déposé, il supprime l'original et déplace le clone dans la zone de dépôt. Très bien maintenant, nous avons corrigé ce problème de débordement, mais nous en rencontrons d'autres. Lorsque vous déposez l'élément clone dans la zone de dépôt, il disparaît. Pour empêcher cela de se produire, j'ai utilisé cette méthode:

$.ui.ddmanager.current.cancelHelperRemoval = true;

Nous avons maintenant arrêté la suppression de l'aide mais elle reste dans "div # tagFun_div_helper" pendant que l'élément déplaçable d'origine est réapparu.

ui.helper.appendTo(this);

Cela transférera l'aide de "div # tagFun_div_helper" dans notre zone de dépôt.

dropped = true;

Cela indiquera à notre fonction d'arrêt de supprimer l'élément d'origine du groupe au lieu de supprimer la classe ".hide". J'espère que cela pourra aider!

43
Justin Bull

Dans mon cas, cela a résolu le problème pour moi et fonctionne parfaitement!

MIS À JOUR 

$(".amigo").draggable({
            revert: "invalid" ,
            helper: function(){
                $copy = $(this).clone();
                return $copy;},
            appendTo: 'body',
            scroll: false
        });
20
capsula