[AJAX] Administration Drag n Drop + Mysql + JQuery pour une galerie photo

**kesmo** · 10/01/2010, 14h26

Bonjour a tous,
Voila un bref aperçu du "backend" que je voudrais réaliser.
http://www.rdfactory.fr/test/test.php

Donc en gros, pouvoir définir précisément l'emplacement d'une image dans une liste de div.
Pour ce qui est de l'affichage sur la page, c'est ok, mais le problème c'est pour enregistrer leur position (dans MySQL par exemple) et qu'il soit visible dans un ordre défini du côté client.

Voici l'aperçu de mon code.

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
 
<script type="text/javascript" src="jquery/1.3.2/jquery.js"></script> 
<script type="text/javascript" src="jquery-ui.min.js"></script> 
 
<style type="text/css"> 
.drop{width:100px;min-height:100px;float:left;}
.allphoto{width:500px;border:1px solid #000;min-height:140px;}
.photo{float:left;width:100px;}
.blanket{padding:4px;width:320px;min-height:140px;margin:0px;padding:0px;}
.droppable-hover{background:#000;}
.clear{clear:both;}
</style> 
 
<script type="text/javascript"> 
var color = new Array(18);
var box = new Array(18);
 
$(document).ready(function(){
	var count = 1;
  $(".photo").draggable({helper: 'clone'});
	$(".drop").droppable({
    accept: ".photo",
    activeClass: 'droppable-active',
    hoverClass: 'droppable-hover',
    drop: function(ev, ui) {
        //si on retourne faux on annul le drop
        if ($(this).children('img').length > 0) return false;
 
        $(this).append(ui.draggable);   
        $('#output').append($(ui.draggable).attr('src')+"<br />");                              
        $('#output').append($(this).attr("id")+"<br />");
    }
	});
});
 
 
		</script> 
 
</head> 
 
<body> 
	<div class="allphoto drop"> 
		<img class="photo" src="Images/commerce/projet1/thumb_01.jpg" /> 
		<img class="photo" src="Images/commerce/projet2/thumb_01.jpg" /> 
		<img class="photo" src="Images/commerce/projet3/thumb_01.jpg" /> 
		<img class="photo" src="Images/commerce/projet4/thumb_01.jpg" />
		<img class="photo" src="Images/commerce/projet5/thumb_01.jpg" /> 
	</div> 
 
 
	<div class="blanket"> 
				<div id="1" class="drop" style="border:solid 1px;"></div> 
				<div id="2" class="drop" style="border:solid 1px;"></div> 
				<div id="3" class="drop" style="border:solid 1px;"></div> 
				<div id="4" class="drop" style="border:solid 1px;"></div> 
				<div id="5" class="drop" style="border:solid 1px;"></div> 
				<div id="6" class="drop" style="border:solid 1px;"></div> 
				<div id="7" class="drop" style="border:solid 1px;"></div> 
				<div id="8" class="drop" style="border:solid 1px;"></div> 
				<div id="9" class="drop" style="border:solid 1px;"></div> 
				<div id="10" class="drop" style="border:solid 1px;"></div>
				<div id="11" class="drop" style="border:solid 1px;"></div> 
				<div id="12" class="drop" style="border:solid 1px;"></div> 
				<div id="13" class="drop" style="border:solid 1px;"></div> 
				<div id="14" class="drop" style="border:solid 1px;"></div>
				<div id="15" class="drop" style="border:solid 1px;"></div>
				<div id="16" class="drop" style="border:solid 1px;"></div>
				<div id="17" class="drop" style="border:solid 1px;"></div>
				<div id="18" class="drop" style="border:solid 1px;"></div>
 
	</div> 
	<div id="output">

J'espère que vous pourrez m'aiguiller sur le sujet.