gestionnaire d'équipement via scriptaculous

[madri2]

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="borderolid 1px black;">
<div id="charac1" class="charac" style="borderolid 1px red;width:50px;height:50px;"></div>
<div id="charac2" style="borderolid 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>

[Ter Rowan]

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 ?

[madri2]

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é"

[Ter Rowan]

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

[madri2]

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 ?

[madri2]

donc j'utilise quoi ?

[Sulfuin]

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

[madri2]

ça semble faire pareil mais bon merci je vais voir

[madri2]

j'ai trouvé le parametre avec jquery pour dragable qui fais que l'objet reste dedans \o/

<div id="bloc1" style="borderolid 1px black;width:50px;height:50px;">
bloc 1
</div>
<div id="bloc2" style="borderolid 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

[madri2]

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