+- 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 : gestionnaire d'équipement via scriptaculous (/showthread.php?tid=3767)
Pages :
1
2
gestionnaire d'équipement via scriptaculous - madri2 - 05-03-2009
Bonjour j'ai recherché partout sur le forum je ne trouve pas de solution.
je cherche à faire comme sur le site gladiatus:
avoir des emplacements ou l'on peux placer des objets, et une liste de ses propres items, et on peux les placer ces objets
j'ai un peu de code, les deux div du haut sont supposés contenir 1 objet de la liste du bas, et le problème c'est que l'objet d'en bas ne reste pas en haut
<div style="border
olid 1px black;"><div id="charac1" class="charac" style="border
olid 1px red;width:50px;height:50px;"></div><div id="charac2" style="border
olid 1px blue;width:50px;height:50px;"></div></div>
<br /><br /><br />
<ul id="liste2">
<li id="bloc2" class="item">bloc2</li>
<li id="bloc3" class="item">bloc3</li>
<li id="bloc4" class="item">bloc4</li>
<li id="bloc5" class="item">bloc5</li>
</ul>
<script>
//new Draggable('charac1', { revert: true });
//Droppables.add('bloc3', { accept: 'item',hoverclass: 'hover',onDrop: function() { $('liste2').highlight();}});
//new Draggable('bloc2', {'revert':true, 'handle':'charac'});
Droppables.add('charac1', { accept: 'item',hoverclass: 'hover',onDrop: function() { $('liste2').highlight();}});
Droppables.add('charac2', { accept: 'item',hoverclass: 'hover',onDrop: function() { $('liste2').highlight();}});
Sortable.create('liste2', {'constraint':false, 'containment':['charac1', 'charac2']});
</script>
RE: gestionnaire d'équipement via scriptaculous - Ter Rowan - 05-03-2009
quelques pistes de réflexion
1) tu ne dois utiliser que des dragable et des dropable pour ce que tu demandes
pourquoi utilises tu un sortable ?
2) tu ne devrais pas déplacer des li dans un div, ça ne fait pas très propre
soit les zones de drop sont des ul et dans ce cas tu déplaces des li
soit les zones de drop sont des div et dans ce cas là tu ne dois pas déplacer (même si ça marche, c'est juste pas propre) des li
3) peux tu expliquer ce que fait "highlight();" ?
4) et enfin... quand dis tu au système que le "item" doit devenir un fils de charac1 ?
RE: gestionnaire d'équipement via scriptaculous - madri2 - 05-03-2009
le hightlight provient des exemples fourni, il sert juste a faire clignoter l'element liste2
"pourquoi utilises tu un sortable ?"
"4) et enfin... quand dis tu au système que le "item" doit devenir un fils de charac1 ? "
le sortable fait que les éléments de la liste devient draggable
"A Sortable consists of item elements in a container element. When you create a new Sortable, it takes care of the creation of the corresponding Draggables and Droppables."
"To make an element draggable, create a new instance of class Draggable. For additional built-in functionality, make a Sortable instead."
en tout cas même si ce n'est pas propre (je pourrais remplacer la liste par des div facilement) le problème est que le droppable (la ou je dépose mon objet) ne récupère pas cet objet droppé mais récupère juste un évenement pour dire "droppé"
RE: gestionnaire d'équipement via scriptaculous - Ter Rowan - 05-03-2009
caduque, caduque...
non tu comprends mal le sortable
le sortable est un objet qui utilise et du dragable et du dropable mais dans une optique de tri au sein de la liste
tu dois utiliser convenablement le dragable et le dropable
là ce que fait ton code (en supposant qu'on ait un dragable)
Quand un objet de classe "item" est relaché sur 'charac1' alors lancer
ce qu'il y a dans onDrop:
soit lancer la fonction highlight sur liste2
mais nulle part tu dis que ton item doit être positionné dans charac1. Si tu veux que item soit rattaché à charac1 tu dois à la place, ou en plus, d'highlight indiqué que tu souhaites que l'item devienne un fils de charac1
reprends les exemples du site , tu devrais vite comprendre
RE: gestionnaire d'équipement via scriptaculous - madri2 - 05-03-2009
c'est bien ce que je veux mais je ne trouve rien pour échanger les items a part dans des sortable
et pour le "caduque" que me conseillez vous pour faire ceci ?
RE: gestionnaire d'équipement via scriptaculous - madri2 - 05-03-2009
donc j'utilise quoi ?
RE: gestionnaire d'équipement via scriptaculous - Sulfuin - 05-03-2009
Il me semble que jQuery permet ce genre de chose. Enfin j'ai pas encore tester le drag and drop mais m'semble bien qu'elle le permet.
Sulfuin
RE: gestionnaire d'équipement via scriptaculous - madri2 - 06-03-2009
ça semble faire pareil mais bon merci je vais voir
RE: gestionnaire d'équipement via scriptaculous - madri2 - 06-03-2009
j'ai trouvé le parametre avec jquery pour dragable qui fais que l'objet reste dedans \o/
<div id="bloc1" style="border
olid 1px black;width:50px;height:50px;">bloc 1
</div>
<div id="bloc2" style="border
olid 1px black;width:250px;height:250px;">bloc 2
</div>
<script type="text/javascript">
$(document).ready(function(){
$("#bloc1").draggable({'revert':'invalid', containment:'bloc2', opacity: 0.5});
$("#bloc2").droppable({
drop: function() { alert('dropped'); }
});
});
</script>
edit: seulement pour que mon bloc 1 (si j'en rajoute plusieurs pour mettre plusieurs blocs dans le second bloc) sort de la case pour aller dans l'autre, et reviens, il ne sera pas classé. J'ai tenté de mettre un sortable, mais ça ne classe pas si l'objet sort, j'ai cherché des evenements mais je ne trouve pas celui qui permet de reclasser quand on objet rentre
RE: gestionnaire d'équipement via scriptaculous - madri2 - 06-03-2009
oui j'ai essayé de faire
$("#items").droppable({
drop: function() { alert(true); $("#items").sortable( 'refreshPosition' ); }
});
et
$("#items").droppable({
drop: function() { alert(true); $("#items").sortable( 'refresh' ); }
});
mais ça ne fait rien lors du drop a part le alert