[RESOLU] .sortable() fait des siennes

Eléphanteau du PHP | 33 Messages

19 mai 2017, 15:13

Bonjour,

J'ai envie dans mon projet de classer mes div à la souris parce que c'est sympatoche. Le problème est le suivant quand je clic sur ma div et que je la déplace ça me génère plein de fois la même div et les div déjà présente parte dans tous les sens :( . Je ne vois pas d'ou ca peu venir n'y ou chercher du coup. J'ai essayé énormément de méthodes sur le web et j'ai toujours le même problème quand j'applique les méthodes a mon application.

Je vous met le JS et l'html
<script>
$("#card_deck_body").sortable();
</script>
<div id="card_deck_body" class="row card-deck card-list">
    <div data-card_id="card_1" class="card-wrapper col-sm-3">
        <div id="card_1" class="card">
            <div class="card-block">
                .....   
            </div>
        </div>
    </div>
    <div data-card_id="card_2" class="card-wrapper col-sm-3">
        <div id="card_2" class="card">
            <div class="card-block">
                .....   
            </div>
        </div>
    </div>
    <div data-card_id="card_3" class="card-wrapper col-sm-3">
        <div id="card_3" class="card">
            <div class="card-block">
                .....   
            </div>
        </div>
    </div>
<div>

J'utilise bootstrap je pensai que c'était la source de l'erreur mais même sans lui ca ne fonctionne pas. Si quelqu'un a une idée une piste un truc quoi.

Merci

Eléphant du PHP | 262 Messages

19 mai 2017, 21:16

Salut,

Tu as oublié

Code : Tout sélectionner

<script> $( function(){ $("#card_deck_body").sortable(); }); </script>
Cela ne fonctionnais pas car ta fonction était utilisé avant que le dom soit chargé et donc tu appliqué ta fonction sur des éléments qui n'existait pas, pense bien a toujours utiliser

Code : Tout sélectionner

$( function(){});

Eléphanteau du PHP | 33 Messages

24 mai 2017, 11:29

C’était une erreur de copie de ma part. Il bien dans le $( function(){});.

La j'arrive a sélectionner ma div mais impossible de la déplacer et ca me la génère en HTML jusqu'a ce que je relâche le clic

Eléphant du PHP | 262 Messages

24 mai 2017, 16:40

Curieux pour moi cela fonctionne j'ai seulement testé sous chrome:

Code : Tout sélectionner

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script> <script> $( function(){ $("#card_deck_body").sortable(); }); </script> <div id="card_deck_body" class="row card-deck card-list"> <div data-card_id="card_1" class="card-wrapper col-sm-3"> <div id="card_1" class="card"> <div class="card-block"> 1 </div> </div> </div> <div data-card_id="card_2" class="card-wrapper col-sm-3"> <div id="card_2" class="card"> <div class="card-block"> 2 </div> </div> </div> <div data-card_id="card_3" class="card-wrapper col-sm-3"> <div id="card_3" class="card"> <div class="card-block"> 3 </div> </div> </div> <div>
Pense aussi à mettre tes balises script en bas de page c'est une bonne pratique. Ta console te renvoi-elle une erreur?

Eléphanteau du PHP | 33 Messages

29 mai 2017, 09:55

Oui j'ai une erreur dans la console :

Uncaught TypeError: (e.currentItem || e.element).find(...).andSelf is not a function.

Mais ca ne m'en dis pas plus du coup la ....
Ca provient du fichier jquery-ui-1.9.2. Peut tu me dire avec quelle version de jquery tu as testé ( j'ai la 3.2.0 moi)?

Merci

PS : je met bien mes fichiers de script a la fin de mon code pas de soucis pour ca :p

Eléphant du PHP | 262 Messages

29 mai 2017, 13:31

Je pense que en effet que sur la 1.9 la fonction n'était pas implémenté, toujours utiliser les dernière version stable. Regarde dans mon code il-y a le cdn jquery:

Code : Tout sélectionner

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script> <script>

Eléphanteau du PHP | 33 Messages

29 mai 2017, 16:46

Le problème était la -_-.

Merci :)