Bonjour à tous!

J'ai besoin d'un petit coup de main pour un projet perso:

Je cherche en quelque sorte à simuler une arborescence de fichier en très simplifié, modifiable via drag and drop:

A titre d'info, la vue donnerait ça;

    à droite un div qui contient des "dossiers".
    à gauche un autre div qui lui contiendra les éléments des dossiers.
par défaut (au chargement de la page plutôt), on voit les éléments du premier dossier de la liste de dossier (dans l'exemple, les éléments du Dossier1, soit leur correspondance Dossier1c)
du coup quand on clic sur un dossier, ça cache tous les éléments puis affiche les éléments correspondants au dossier cliqué
Jusque là aucun soucis
A noter un truc pour pas trop emmerder avec le css j'ai pas inclut les éléments des "fichiers" directement dans les "dossiers" au niveau du code html, il y a des correspondances qui sont faites via l'id. C'est peut etre pas la meilleur idée, n'hésitez pas à me faire un retour si vous trouvez ça naze La structure du machin si vous avez la flemme de regarder:
div dossier
    Dossier1
    Dossier2
    Dossier3
div element
    Dossier1c
        elem....
    Dossier2c
        elem....
    Dossier3c
        elem....
Le truc c'est que je veux faire un système de drag and drop pour pouvoir à la fois pour changer l'ordre dans la liste des dossiers et des éléments (au sein de leur parent respectif) => Mettre "Chanson1_1" après "Chanson2_1" (éléments de "Dossier1c")
Mais aussi pour pouvoir, toujours via le drag and drop drag, déplacer un élément vers un autre dossier, pour le "changer de place" => Mettre "Chanson1_2" (du Dossier2) dans le dossier "Dossier1c", dans ce cas il arriverait à la fin de la liste soit après "Chanson1_1"
J'ai trouvé Jquery UI qui permet de faire les deux sans trop s'embeter, mais impossible de mixer les deux...
J'ai aussi trouvé ça qui correspond à peu près à ce que je veux: http://jsfiddle.net/DKBU9/12/ mais j'arrive pas à l'intégrer (et en ayant creusé un peu je suis pas sur que ce soit adapté :/ )

J'espère que c'est assez clair, si quelqu'un a un ptit truc je suis preneur

Merci d'avance!

le code HTML:

<div id="audio_upload_containerchild">
	<div id="audio_dir_nav" class="audio_drop_elem">
		<div id="audio_dir_nav_Dossier1">
			Dossier1
		</div>
		<div id="audio_dir_nav_Dossier2">
			Dossier2
		</div>
		<div id="audio_dir_nav_Dossier3">
			Dossier3
		</div>
	</div>
	<div id="audio_file_nav_container" class="audio_drop_elem">
		<div id="audio_dir_nav_Dossier1c">
			<div>
				Chanson1_1
			</div>
			<div>
				Chanson2_1
			</div>
			<div>
				Chanson3_1
			</div>
			<div>
				Chanson4_1
			</div>
			<div>
				Chanson5_1
			</div>
			<div>
				Chanson6_1
			</div>
			<div>
				Chanson7_1
			</div>
			<div>
				Chanson8_1
			</div>
		</div>
		<div id="audio_dir_nav_Dossier2c">
			<div>
				Chanson1_2
			</div>
			<div>
				Chanson2_2
			</div>
			<div>
				Chanson3_2
			</div>
			<div>
				Chanson4_2
			</div>
			<div>
				Chanson5_2
			</div>
			<div>
				Chanson6_2
			</div>
			<div>
				Chanson7_2
			</div>
			<div>
				Chanson8_2
			</div>
		</div>
		<div id="audio_dir_nav_Dossier3c">
			<div>
				Chanson1_3
			</div>
			<div>
				Chanson2_3
			</div>
			<div>
				Chanson3_3
			</div>
			<div>
				Chanson4_3
			</div>
			<div>
				Chanson5_3
			</div>
			<div>
				Chanson6_3
			</div>
			<div>
				Chanson7_3
			</div>
			<div>
				Chanson8_3
			</div>
		</div>
	</div>
</div>

salut, je travaille sur un projet similaire (dans le fait de mettre en cascade des .sortable), voilà un lien qui m'a pas mal aidé :

http://jsfiddle.net/ExLqv/12/

Jquery-ui n'aime pas du tout que tu ais un élément pouvant être déplacé et pouvant en même temps être un Sortable par lui même. Il faut donc que tu sépare les deux éléments en crééant un bloc intermédiaire;

dans le jsfiddle que j'ai mis en lien, les .container sont des Sortable, les .container-wrapper et les .item sont les éléments qui peuvent être déplacés. tu remarquera que tu peux déplacer un .item dans n'importe quel container, qu'il soit au premier plan (bleu) ou au second (vert)

Salut!

Merci pour ta réponse mais je vois pas comment faire correspondre avec ce qu'il me faut :/

Dans ton exemple, les listes sont sortables au sein d'elles mêmes et on peut déplacer les éléments dans d'autres liste via connectWith si je dis pas de bêtise?

Le truc c'est qu'il faut me faut deux listes sortables, la liste de droite (les fichiers) qui soit draggable, et ce "sur" les éléments de la liste de gauche (soit les dossiers; c'est pour simuler une dépose de fichier dans un dossier comme avec un gestionnaire de fichier genre l'explorer Windows ou autre).

J'ai peut être pas été clair dans mes explications, je mets une capture d'écran ci dessous avec une tite légende

Dans cet exemple, c'est le Dossier1 qui est sélectionné, du coup ce sont les éléments du Dossier1 (Chanson1,Chanson2,Chanson3,...) qui sont affichés sur le panneau de droite. Si on clique sur un élément de la liste Dossier, les éléments correspondants seront affichés à ce dossier sur la droite (du coup cette partie est faite)

Les éléments de la liste Chanson sont sortables au sein même de la liste Chanson.

Les éléments de la liste Dossier sont sortables au sein même de la liste Dossier.

On ne peut pas déposer un élément d'une liste vers une autre liste que la sienne MAIS:

on doit pouvoir drag un élément de la liste Chanson SUR un élément de la liste Dossier et ce pour le déplacer dans un autre Dossier

Salut, alors met tes deux listes en Sortable (non connectées); ainsi, on peut modifier l'ordre dans chacune sans affecter l'autre.

Pour pouvoir activer le drag&drop sur les dossiers :

- mets des classes sur tes dossiers / musiques (j'utiliserai "folder"/"file")

- ajoute un droppable sur tes dossiers avec comme paramètres :

     - accept : ".file" pour permettre de recevoir tes fichiers

     - drop : function(ev,ui){//do something} pour faire ce que tu veux derrière

voilà un jsfiddle qui reproduit ce que tu demandais :

http://jsfiddle.net/vjLrcsuk/4/

@+

aaaaaaaaaaaah trop bien c'est exactement ça

un très grand merci !

Bon beh re c'est à nouveau moi :/

Je me permet de rouvrir le topic vu que le problème est toujours sur le même sujet

J'ai cp ton code Kalioz et je comprend pas pourquoi ça passe pas....

J'ai fait un jsfield pour plus de clarté:

https://jsfiddle.net/8z29ajx0/

Le sortable marche très bien à la fois sur les "dossiers" et "fichiers"

Le drag et le drop passe aussi, je peux exécuter du code lors du drop sur les zones qui m'intéresse sauf ce qui m'intéresse, à savoir la ligne

 $("#"+ev.target.id+"c").append(ui.draggable);

j'ai tenté d'append ev.originalEvent.target ça fait le même résultat

Y a vraiment un truc qui m'échappe car c'est plus ou moins le même code que Kalioz, qui marche très bien

Je peux accéder à chacun des éléments séparément, donc pas de faute là dessus, mais le append ne passe pas.

J'ai vérifié la syntaxe de la fonction append je ne vois pas de faute pourtant...

Un autre truc chelou c'est que je ne peux pas non plus faire ui.draggable.remove(); (alors que ça marche aussi très bien sur le script de Kalio...)

Y a ptet un lien mais je le vois pas

Pardonnez ma noobitude :|

Merci d'avance

la raison provient de tes sélecteurs, si tu regarde le jsfiddle que je t'ai fourni je n'ai pas mis en droppable la zone contenant les dossier mais les dossiers eux mêmes

fiddle corrigé : https://jsfiddle.net/8z29ajx0/1/

(c'est encore relativement brouillon car je détruit le style à la dépose d'un clone (essaie de le garder et tu comprendras))

Encore une fois un grand merci pour ta réponse

Cependant je ne comprend pas la différence entre ton code et le mien au niveau des sélecteurs

Mon sélecteur "#audio_dir_nav *" cible bien les dossiers, il renvoie le même objet que toi (je viens de faire la vérif pour en avoir le coeur net)

Je me suis gouré sur le paramètre accept j'aurais du mettre "#audio_file_nav_container * *" au lieu de "#audio_file_nav_container *" pour cibler le contenu des conteneurs (donc les éléments) mais même en le changeant ça ne passe pas à partir de mon code

En faisant des tests (mix des mes sélecteurs et de ton block dans drop) j'ai l'impression que c'est mon utilisation de append qui pose problème

Pour le style en effet mais c'est pas un problème je peux le rappliquer après au pire ou détruire les propriétés non voulues

En tout cas, encore une fois, merci beaucoup pour ta réponse je passe le sujet en résolu du coup