[jQuery] Drag & Drop qui fait n'importe quoi...

Bonsoir à tous !


Je viens à vous avec un nouveau problème qu'encore une fois je ne m'explique pas...
J'ai un plateau de jeu avec 4x4 cases dont 1 à 6 peuvent être obstruées. Sur les autres, on peut glisser une carte.

Mon drag & drop fonctionne correctement, je peux faire glisser une carte sur une case droppable, seulement, lorsque je lâche la carte sur la case, ma carte par à l'opposé du plateau par une symétrie très approximative.

J'essaye donc de déplacer ma carte, et la, elle se "téléporte" dans la case au bon endroit...

Quelqu'un a une idée d'où cela peut venir?

Voila mon code pour la carte:
card.js

$(function() {
    $('img[alt=card]').draggable({
        containment: '#body',
        revert: 'invalid',
        revertDuration: 250
    });

    $( '.casedroppable' ).droppable({
        accept: 'img[alt=card]',
        tolerance: 'intersect',
        drop: function( event, ui ) {
            ui.draggable.appendTo($(this))
            .draggable({ containment: 'parent' });
            $(this).droppable({ disabled: true })
        }
    });
});

Voila maintenant mon code pour la gestion de mon plateau :
Les cases de mon tableau se voient attribuer la class="casedroppable" ou "undroppable" ici.
plateau.js

$(function() {

    // Calcul aléatoire du nombre de cases droppables
    var nbCasesDroppable = Math.floor(Math.random()*6+1);

    // Génération d'un tableau contenant [0, 1, 2, 3 ...]
    var cases = new Array();
    for( var  i = 0 ; i <= 16 ; i++ ) {
        cases.push(i);
    }

    // Mélange du tableau
    var casesSuffle = new Array();
    while(cases.length) {
        casesSuffle.push(cases.splice(Math.floor(Math.random()*cases.length), 1)[0]);
    }

    // Génération des cases (les nbCasesDroppable premières cases de casesSuffle seront droppable)
    for( var  i = 0 ; i <= 16 ; i++ ) {
        var caseElement = $('#'+casesSuffle[i]);
        if( i < nbCasesDroppable ) {
            caseElement.addClass('caseundroppable');
        }
        else {
            caseElement.addClass('casedroppable');
        }

    }

});

Voila enfin mon HTML:

<div id="card_menu">
                <ul>
                    <li><img src="css/img/gobelin.gif" alt="card" class="ui-widget-content"/></li>
                    <li><img src="css/img/gobelin.gif" alt="card" class="ui-widget-content"/></li>
                    <li><img src="css/img/gobelin.gif" alt="card" class="ui-widget-content"/></li>
                    <li><img src="css/img/gobelin.gif" alt="card" class="ui-widget-content"/></li>
                    <li><img src="css/img/gobelin.gif" alt="card" class="ui-widget-content"/></li>
                </ul>
            </div>
            <div id="centre">
                <table>
                    <tr>
                        <td id="1" ></td>
                        <td id="2" ></td>
                        <td id="3" ></td>
                        <td id="4" ></td>
                    </tr>
                    <tr>
                        <td id="5" ></td>
                        <td id="6" ></td>
                        <td id="7" ></td>
                        <td id="8" ></td>
                    </tr>
                    <tr>
                        <td id="9" ></td>
                        <td id="10" ></td>
                        <td id="11" ></td>
                        <td id="12" ></td>
                    </tr>
                    <tr>
                        <td id="13" ></td>
                        <td id="14" ></td>
                        <td id="15" ></td>
                        <td id="16" ></td>
                    </tr>
                </table>
            </div>

[/i]

Personne n'a une petite idée? Je n'ai toujours pas réussi à résoudre se problème

Ça fait ça sur tous les navigateurs ? Perso j'ai eu le problème hier avec du sortable() sous Firefox, qui lors du déplacement d'éléments déconnait complètement sur l'offset. Sur Safari et Chrome aucun problème.

Plusieurs causes (& solutions) :
• les éléments sont en float, et leur hauteur a du mal à être calculée (il faut alors fixer la hauteur en css)
• un élément conteneur est en position:relative (il faut lui ajouter un overflow:auto pour que le problème disparaisse)
• Un overflow:hidden mal placé peut poser problème.

Bonsoir,

J'ai essayé toutes les solutions que tu me proposes et rien n'y fait...

Toutes mes tailles sont bien définis dans le CSS donc aucun risque de problème de calcul de se côté.
L'élément conteneur n'est pas en position:relative.
Aucun overflow:hidden dans mon code

Vais-je trouver, je peux pas avancer tant que ce n'est pas réglé

Je pense que ta liste se met à jour avec la base de donnée, et que la sélection de tes item se fait à l'inverse: regarde peut être du côté de DESC et ASC avec mysql !