Connaitre nouvel emplacement avec sortable()

Version imprimable

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:

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 ;)

23/09/2011, 12h49
SpaceFrog

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

Code:

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

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:

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 ?

24/09/2011, 09h51
SpaceFrog

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

Code:

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