11540 sujets

JavaScript, DOM et API Web HTML5

Changer la couleur du fond objet drag-drop

Bonjour,

j'essaie de changer la couleur de fond d'un objet lorsqu'il est déposé au bon endroit.

J'ai pris un code simple représentant le problème, sachant tout de même que la div à laquelle la couleur de fond doit s'appliquer est variable.

j'ai essaié avec ui.draggable.addClass et avec css(), mais sans résultat.

Merci de votre aide


<!doctype html>
<html lang="en">
    <head>
        <style>
            #makeMeDraggable {
                float: left;
                width: 300px;
                height: 300px;
                background: red;
            }
            
            #makeMeDroppable {
                float: right;
                width: 300px;
                height: 300px;
                border: 1px solid #999;
            }
            
            .correct {
                background: green;
            }
        </style>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js">
        </script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js">
        </script>
        <script type="text/javascript">
            
            $(init);
            
            function init(){
                $('#makeMeDraggable').draggable();
                $('#makeMeDroppable').droppable({
                    drop: handleDropEvent
                });
            }
            
            function handleDropEvent(event, ui){
                var draggable = ui.draggable;
                alert(ui.draggable.attr('id'));
                ui.draggable.addClass('correct');
                
            }
        </script>
    </head>
    <body>
        <div id="content" style="height: 400px;">
            <div id="makeMeDraggable">
            </div>
            <div id="makeMeDroppable">
            </div>
        </div>
    </body>
</html>
Merci beaucoup,

j'ai essayé ton code , il donne exactement le même comportement que le mien. Pas de changement de couleur !!!!, donc pas de changement de classe, pourtant l'objet ciblé semble être le bon (d'ailleurs avec un changement de fond avec la fonction .ccs() cela marche, mais je préférerais mettre le changement de style au niveau du css).

Je dois rater une énorme erreur au niveau de la classe "correct". Cela fait un bout de temps que je tourne un peu en rond.

Cordialement
D'ailleurs, je me trouve pas la chasse "correct"

            $(function(){
                $("#makeMeDraggable").draggable();
                $("#makeMeDroppable").droppable({
                    drop: function(event, ui){
                        alert($(ui.draggable).attr('id'));
                        if (document.getElementById('correct')) {
                            alert('existe');
                        }
                        else {
                            alert("n'existe pas");
                        }
                        $(ui.draggable).addClass("correct");
                    }
                });
            });
        </script>
Je ne sais pas pourquoi ça ne marche pas, t'a essayer d'inspecter l'élément après que la class correct lui ai été ajouté pour voir si elle y est bien ?

Par contre dans ton code précédent, fait attention, "document.getElementById('correct')" va essayer de sélectionner un élément avec l'"id" "correct" et non la class. Du coup, je pense que ça ne te renvois rien et que tu doit avoir des alert("n'existe pas");

D’ailleurs je te conseil de faire des console.log("n'existe pas"); à la place de tes alertes, c'est beaucoup plus pratique et firefox/chrome on une console de base.
Sujet clos
Aller à