Спасите кто-может!!!
Значит генерирую из базы данных пхпшкой вывод на экран картинок, у пользователя есть возможность перемещать их местами, то есть SORTABLE + DRAG & DROP(Ajax+Jquery), все супер, но при попытке изменить номер картинки(например первую картинку передвигаю на место восьмой - первая стает восьмой, восьмая - девятой, вторая - первой.....) номера записываются не правильно, кроме того некоторые даже повторяются, не понимаю почему, код прилагаю...
стартовый файл step2.php, таблица roliki.s_pics.
| PHP |
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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
| <?php
// Include your file which makes a connection to your database
include_once 'functions.php';
parse_str($_POST['data']);
$a = count($sortlist);
for ($i = 1; $i <= $a; $i++) {
$sql = mysql_query("UPDATE s_pics SET numNum = '$i' WHERE picNum = '$sortlist[$i]'") or die(mysql_error());
if ($sql) print 'Updating order went well'.$i;
}
sleep(1);
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Demo Sorting images with Prototype and Script.aculo.us (webdesign.torn.be/tutorials/)</title>
<script type="text/javascript" src="js/scriptaculous/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous/scriptaculous.js"></script>
<script type="text/javascript">
//<![CDATA[
document.observe('dom:loaded', function() {
var changeEffect;
Sortable.create("sortlist", {tag:'img',overlap:'horizontal',constraint:false,
onChange: function(item) {
var list = Sortable.options(item).element;
$('changeNotification').update(Sortable.serialize(list).escapeHTML());
if(changeEffect) changeEffect.cancel();
changeEffect = new Effect.Highlight('changeNotification', {restoreColor:"transparent" });
},
onUpdate: function(list) {
new Ajax.Request("Step2.php", {
method: "post",
onLoading: function(){$('activityIndicator').show()},
onLoaded: function(){$('activityIndicator').hide()},
parameters: { data: Sortable.serialize(list) }
});
}
});
});
//]]>
</script>
<style>
<!--
#sortlist {
width: 360px;
margin: 0 auto;
padding: 20px;
margin-bottom: 20px;
border: 1px solid #a5a1a1;
text-align:center;
}
#sortlist img.sorting {
float: left;
margin: 4px;
padding: 4px;
border: 1px solid #ccc;
}
#sortlist img.sorting:hover {
float: left;
margin: 4px;
padding: 4px;
border: 1px solid #666;
cursor: move;
}
#activityIndicator, #changeNotification {
text-align: center;
font: normal 1em georgia, arial, helvetica;
}
-->
</style>
</head>
<body>
<div id="changeNotification"> </div>
<div id="activityIndicator" style="display:none; ">Saving image order to database</div>
<div id="sortlist">
<?php
$sql = mysql_query("SELECT * FROM s_pics ORDER BY numNum");
while ($row = mysql_fetch_array($sql)) {
print '<img class="sorting" id="pictureId_'.$row['numNum'].'" src="imgMin/'.$row['pic'].'" />';
}
?>
</div>
</body>
</html> |
|
(
