.sortable() fait des siennes

Eléphanteau du PHP | 27 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 | 238 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 | 27 Messages

Hier, 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 | 238 Messages

Hier, 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?