Bonjour à tous,

J'ai mis en place le drag and drop jquery UI.

je veux que mon drag (depuis une liste li) soit déplacé dans mon drop (une case de tableau). Cela fonctionne, voici mon tableau :

<table id="table-planning" class="table table-hover">
    <tr>
        <td> Ligne 1</td>
        <td class="container-drop"></td>
        <td class="container-drop"></td>
        <td class="container-drop"></td>
    </tr>
    <tr>
        <td> Ligne 2</td>
        <td class="container-drop"></td>
        <td class="container-drop"></td>
        <td class="container-drop"></td>
    </tr>
</table>

<div>
    Ma liste :
    <ul>
        <li class="draggable">Element li 1</li>
        <li class="draggable">Element li 2</li>
        <li class="draggable">Element li 3</li>
    </ul>
</div>

Voici mon code js :

$( function() {
    $(".draggable").draggable({
        revert: 'valid',
    });


    $(".container-drop").droppable({
        accept : '.draggable',
        drop : function( event, ui){
            console.log(ui);
            console.log($(this));
            console.log(event.target);

            var li = ui.draggable[0];
            var name = li.firstChild.nodeValue;
            var element = name;

            $(this).append(element);

            $(ui.draggable).remove();
        }
    });

} );

Cependant dans ma fonction drop $(this) me renvoit une case du tableau qui n'est pas la bonne, ducoup mon element drag et mis dans une mauvaise case du tableau.

Pouvez-vous m'aider à corriger ce problème, je ne comprend pas pourquoi j'ai la mauvaise case td dans la fonction drop ??

-
Edité par marcelo73 15 février 2017 à 12:21:15

Bonjour, peux tu essayer de faire juste changer de couleur ta case sur le drop?

drop: function(e,ui) {
    $(this).css('background','red');
}

Afin de voir si c'est le this qui est ciblé qui pose problème où le traitement que tu fais dans ton drop

Merci Florent pour ta réponse,

J'ai fait comme tu m'a dit, enfaite ça colore la mauvaise case, avec un decalage de 3.

Je te met la structure correct html, après coloration:

        <tbody><tr class="success">
            <th>#</th>
            <th>Dimanche 12</th>
            <th>Lundi 13</th>
            <th>Mardi 14</th>
            <th>Mercredi 15</th>
            <th>Jeudi 16</th>
            <th>Vendredi 17</th>
            <th>Samedi 18</th>
            
        </tr>
        <tr>
            <td> Midi</td>
            <td class="container-drop ui-droppable"></td>
            
            <td class="container-drop ui-droppable"></td>
            
            <td class="container-drop ui-droppable">CCCC</td>
            
            <td class="container-drop ui-droppable"></td>
            
            <td class="container-drop ui-droppable"></td>
            
            <td class="container-drop ui-droppable">GGGG</td>
            
            <td class="container-drop ui-droppable"></td>
            
        </tr>
        <tr>
            <td> Soir</td>
            <td class="container-drop ui-droppable"></td>
            
            <td class="container-drop ui-droppable">BBBBBBB</td>
            
            <td class="container-drop ui-droppable"></td>
            
            <td class="container-drop ui-droppable">AAAAAAA</td>
            
            <td class="container-drop ui-droppable"></td>
            
            <td class="container-drop ui-droppable" style="background: red none repeat scroll 0% 0%;"></td>
            
            <td class="container-drop ui-droppable"></td>
            
        </tr>
    </tbody>

Enfaite j'ai poser l'element entre la case BBBBB et AAAAA

Donc le problème est ce qui est ciblé, ça vient peut etre d'une erreur html, mais je vois pas ..

-
Edité par marcelo73 17 février 2017 à 16:23:30

As tu essayé avec des classes differentes?

Celles ci sont peut etre reservées par Jquery :/

Salut Florent,

Non j'ai changé dans le js fiddle : http://jsfiddle.net/xkwLc5to/4/ et sur mon code, rien n'y fait .... :\  :\

Attention copier-coller directement le lien, sinon ça marche pas...

(Les classe jquery etait un oublie de ma part, j'avais copier l'html de ma page pour faire le jsfiddle...)

Edit : j'ai trouvé. enfaite mon li est super grand sur la page, ducoup pour le drop, il selection jusqu'au bout du li, c'est pour ça qu'il y a un decalage de trois cases. Ducoup j'ai rajouté

tolerance:"pointer"

http://jsfiddle.net/xkwLc5to/5/

$(function () {
    $('#draggable').draggable({
        helper: 'clone'
    });

    $('#droppable1, #droppable2').droppable({
        tolerance: "pointer",
        drop: function (event, ui) {
            $(this)
                .append(ui.helper.clone(false).css({
                position: 'relative',
                left: '0px',
                top: '0px'
            }));
        }
    });
});

-
Edité par marcelo73 20 février 2017 à 11:19:35