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') })

Connaitre nouvel emplacement avec sortable()

jQuery

Vue hybride

Discussions similaires

Partager

Partager