Connaitre nouvel emplacement avec sortable()

popy67 · 23/09/2011, 12h16

Bonjour,

Dans mon script ci-dessous, comment faire pour connaitre l'emplacement des différentes images et les enregistrer dans une base de données ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div id="photos">
	<div id="position1" style="position:relative; border:1px dotted blue; width:100px">
    <img src="img1.jpg"/>
    </div>
 
    <div id="position2" style="position:relative;border:1px dotted blue; width:100px">
    <img src="img2.jpg" />
    </div>
 
    <div id="position3" style="position:relative;border:1px dotted blue; width:100px">
    <img src="img3.jpg" />
    </div>
</div>
 
<script type="text/javascript">
$("div#photos").sortable();
</script>

Merci d'avance pour vos réponses

SpaceFrog · 23/09/2011, 12h49

un $.each sur le div conteneur et tu recupères et les id ou les offset().top ?

SpaceFrog · 23/09/2011, 16h56

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<script type="text/javascript">
$(function(){
$("#photos").sortable();
})
 
function order(){
var liste=""
$.each($('#photos div'), function(){ liste+=$(this).attr('id') })
alert (liste)
}
</script>
</head>
<body >
<div id="photos">
	<div id="position1" style="position:relative; border:1px dotted blue; width:100px">
    <img src="img1.jpg"/>
    </div>
 
    <div id="position2" style="position:relative;border:1px dotted blue; width:100px">
    <img src="img2.jpg" />
    </div>
 
    <div id="position3" style="position:relative;border:1px dotted blue; width:100px">
    <img src="img3.jpg" />
    </div>
</div>
 
<input type="button" onclick="order()" value="go"/>

popy67 · 23/09/2011, 20h33

Bonjour SpaceFrog,

Désolé pour ma réponse tardive, merci d'avoir répondu cependant c'est pas encore tout à fait ce que je cherche à faire mais j'ai sans doute oublié de mettre aussi un id sur les photos pour cela...

Jje souhaite pouvoir déplacer les photos d'un cadre à l'autre et que leur nouvel emplacement soit affiché dans le alert().

Par exemple :
photo69 position1 ; photo93 position2 ; photo25 position3

après avoir interverti les photos 93 et 25 on afficherait
photo69 position1 ; photo25 position2 ; photo93 position3

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="photos">
	<div id="position1" style="position:relative; border:1px dotted blue; width:100px">
    <img id="photo69" src="img1.jpg"/>
    </div>
 
    <div id="position2" style="position:relative;border:1px dotted blue; width:100px">
    <img id="photo93" src="img2.jpg" />
    </div>
 
    <div id="position3" style="position:relative;border:1px dotted blue; width:100px">
    <img id="photo25" src="img3.jpg" />
    </div>
</div>

comment faire ?

SpaceFrog · 24/09/2011, 09h51

ben suffit de rajouter un selecteur qui pointe sur la balise enfant image ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$.each($('#photos div'), function(){ liste+=$(this).children('img:eq(0)'.attr('id')+'_'+ $(this).attr('id') })

23/09/2011, 12h49	#2
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 040 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 040 Points : 45 141 Points : 45 141	un $.each sur le div conteneur et tu recupères et les id ou les offset().top ? __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

24/09/2011, 09h51	#5
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 040 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 040 Points : 45 141 Points : 45 141	ben suffit de rajouter un selecteur qui pointe sur la balise enfant image ... Code : Sélectionner tout - Visualiser dans une fenêtre à part $.each($('#photos div'), function(){ liste+=$(this).children('img:eq(0)'.attr('id')+'_'+ $(this).attr('id') }) __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email