+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Programmation, infrastructure (https://jeuweb.org/forumdisplay.php?fid=51)
+--- Sujet : [Javascript] Drag'n drop bis ( défi pour les bons) (/showthread.php?tid=3105)
Pages :
1
2
[Javascript] Drag'n drop bis ( défi pour les bons) - Ter Rowan - 25-09-2008
ben oui j'essaie d attirer comme je peux
donc voici, ceux qui ont suivi mes aventures piteuses de drag & drop il y a déjà quelques nombreuses semaines se souviendront probablement du sujet:
je m étais retrouvé confronté à ce que j'appelle du "lag" sous ie (6 et 7)
je m y remets donc, je fais différents tests et tous me donnent le même résultat
j'ai donc besoin d'aide:
voici une version de mon script (sous prototype / script aculo)
Code PHP :
<?php
var listeRess= document.getElementsByClassName('ress');
listeRess.each ( function(item)
{
new Draggable(item,
{
revert : true,
handle : "handle"
});
});
var listeTd = document.getElementsByClassName('invent');
listeTd.each( function(item)
{
Droppables.add(item,
{
accept: 'ress',
onDrop: function(entree)
{
alert(item.id);
}
});
});
guère compliqué, vous comprendrez aisément ce que chaque ligne fait...
ce script est quelque peu modifié pour chaque type d'essai, à savoir
+ une succession de li (dropable), chaque li contenant un span (dragable)
+ une table avec des td (dropable) chaque td contenant un span (dragable)
+ une succession de li (dropable ET dragable)
dans le zip attaché y a tout ce qu il faut y compris prototype et scriptaculo
si vous pouviez regarder un peu, me dire si j ai raté quelque chose, etc...
bien sûr si avec jquery ou mootools ça marche mieux, c'est top
rappel :
sur deux machines différentes :
firefox marche nickel
ie 6 et ie 7 le drag est extremement sacadé pour ne pas dire pire
il suffit de virer les fonctions de drop, pour que ie 6 et 7 permettent un drag fluide (mais évidement, y a plus de drop)
donc de l aide la dessus serait la bienvenue, à vos cerveaux !
RE: [javascript] drag'n drop bis ( défi pour les bons) - Ter Rowan - 26-09-2008
bon ben j'ai enfin trouvé, après avoir essayé de piger et de copier le code de scriptaculous j'ai fait un machin spécifique à mon besoin directement dans le drag
conclusion ne pas utiliser l'objet Droppables à de trop nombreuses reprises (ça marche très bien avec une ou deux instances, c'est le nombre qui fait tomber ie)
évidemment, comme c'est mon code je ne suis pas forcément rassuré mais pour le moment mais tests marchent sur ie et ff c'est déjà ça :p
n'empêche suis intéressé par d'éventuels retours sur les autres librairies
bien content quand même, ça m'a couté quelques heures de recherches et quelques mois de déconfiture mais a priori, c'est reparti mon kiki
RE: [javascript] drag'n drop bis ( défi pour les bons) - Anthor - 26-09-2008
Les autres librairies seront plus rapides à traiter tes demandes. Prototype commence à vieillir
RE: [javascript] drag'n drop bis ( défi pour les bons) - Ter Rowan - 26-09-2008
a priori le manque de performance vient de script aculo sur ce coup, j'utilise toujours les éléments de prototype pour gérer le drop ( position du curseur, événement)
j'aimerais bien passé effectivement à du plus récent mais j'ai trop peur de faire cela pour rien (au sens et si ça rame de la même manière parce qu'ils ont voulu faire du générique, donc moins performant)
et ça à quand même un coup vu tout ce que j'ai pu pisser comme code jusque là :p
RE: [javascript] drag'n drop bis ( défi pour les bons) - Ter Rowan - 27-09-2008
oxman a écrit :Evite de faire un drag sur chaque objet.
Créer le drag lorsque l'on clique dessus où lorsque l'on est dessus, et ça devrait suffir
c'est exactement ça (enfin pas sur le drag mais sur le drop) : je fais une énorme zone de drop et lors du "relaché" j'identifie quelle sous zone est concernée
pas simple pour moi, il a fallu que je comprenne le système de script aculous. C'est là qu'on voit les différences de niveau de programmation : j'ai grosso modo compris ce qu'il faisait, je pourrais certainement faire à peu près la même chose mais la qualité de code est tellement différente, j'ai l'impression d'être un éléphant dans un magasin de cristal ^^ (enfin d'un autre côté mon code est plus performant sous ie hihihi, et puis l'éléphant, c'est pas l'animal phpien par excellence ? :p)
RE: [Javascript] Drag'n drop bis ( défi pour les bons) - jmpicot - 05-09-2010
Bonsoir,
Je rencontre le même soucis de lenteur et pas que sur ie, ff aussi. Il semble que le nombre trop élevé de droppable soit en cause, dans mon cas j'en ais environ 500 par page (Calendrier avec horaires => agenda). Je ne vois pas quelle solution mettre en place, j'ai bien essayé avec d'autres librairies (dhtmlgoodies, toolamn...) mais sans succès.
Je vois que vous avez trouvés une solution en déclarant un super droppable, mais je ne voit pas comment faire car dans mon cas mes 500 drop sont des td et quand je mets le table en drop ça ne marche pas, normal...
Pourries-vous m'éclairer?
D'avance merci.
JM
RE: [Javascript] Drag'n drop bis ( défi pour les bons) - gameprog2 - 05-09-2010
Déjà si tu pouvais trouver un moyen d'éviter les tables et leur TD ça serait moins lourd, après je ne sais pas ce que fait ton programme, je dis ça d'une façon générale hein
Il est déconseillé d'utiliser les tables quand on peut faire autrement d'après le W3C.
RE: [Javascript] Drag'n drop bis ( défi pour les bons) - Thib4s - 05-09-2010
(05-09-2010, 05:10 AM)gameprog2 a écrit : Déjà si tu pouvais trouver un moyen d'éviter les tables et leur TD ça serait moins lourd, après je ne sais pas ce que fait ton programme, je dis ça d'une façon générale hein
Il est déconseillé d'utiliser les tables quand on peut faire autrement d'après le W3C.
Les tables sont déconseillées pour tout ce qui est "AFFICHAGE", c'est à dire pour tous les sites qui faisait du table-designing.
Les tableaux sont tout ce qui a de plus conseillé pour ce qui est affichage de données (classement, liste d'objet, ...)
De plus un tableau fait moins "laguer" une page que de jouer avec des div et leur positionnement.
RE: [Javascript] Drag'n drop bis ( défi pour les bons) - Ter Rowan - 05-09-2010
olalalala
oui le sujet table est hors propos et n'est pas du tout responsable de la lenteur (j'ai tout essayé, table, liste ul/li, div imbriqués)
de mon analyse la lenteur vient du nombre d'écouteurs de l'événement "drop" d'où l'intérêt de ne mettre cet événement que sur le conteneur contenant l'ensemble des zones de drop (ici la table)
après pour identifié sur quelle zone le drop a eu lieu, j'avais utilisé les méthodes de mes librairies de l'époque (prototype + scriptaculous) mais je pense que cela marche de même avec jquery si tu l'utilises
grosso modo pour savoir "où" cela a eu lieu, tu dois
- identifier où (position de la souris en x y) a été lâché l'objet (c'est contenu dans l'objet qui porte l'événément)
- identifier les positions de chacune de tes zones (coin haut gauche, coin bas droit)
- en déduire la zone en comparant ses positions avec celle de la souris
àa se fait super aisément avec des librairies du web
mais bon ca date un peu, je mettrais certainement quelques heures à refaire (et j'ai plus ces sources :/)
RE: [Javascript] Drag'n drop bis ( défi pour les bons) - NicoMSEvent - 06-09-2010
j'ai aussi eu ces problèmes avec prototype/scriptaculous, surtout si je prends l'objet sur un des bords (ce qui se passe : je prends l'objet sur le bord, je déplace rapidement ma souris -> il se peut que le curseur lors du rafraichissement sorte de l'objet, et là ça lag/plante)
Donc, prévoir des objets +- grands, et aussi point de vue utilisation, prends l'objet au centre... même si on préfère une solution plus propre, celle là est celle que j'ai gardé (le seul drag/drop est pour moi dans la partie administration, pas pour les joueurs)