SORTABLE + DRAG & DROP(Ajax+Jquery) - JavaScript, Ajax

маГГ85 · 14.01.2012, 04:48

Спасите кто-может!!!
Значит генерирую из базы данных пхпшкой вывод на экран картинок, у пользователя есть возможность перемещать их местами, то есть SORTABLE + DRAG & DROP(Ajax+Jquery), все супер, но при попытке изменить номер картинки(например первую картинку передвигаю на место восьмой - первая стает восьмой, восьмая - девятой, вторая - первой.....) номера записываются не правильно, кроме того некоторые даже повторяются, не понимаю почему, код прилагаю...

стартовый файл step2.php, таблица roliki.s_pics.

PHP код:


			
<?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>

Опции темы	Поиск в этой теме
Версия для печати Отправить по электронной почте	Поиск в этой теме: Расширенный поиск

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
WinForms PictureBox VC++ Drag&Drop	_Alerter_	Windows Forms	4	27.05.2011 10:38
Drag&Drop	Guzal	Qt и кроссплатформенное программирование С/С++	0	12.04.2011 01:19
drag&drop	БАО	Общие вопросы C/C++	2	06.05.2010 12:17
Нужна помощь (Drag-And-Drop & Drag-Abd-Dock))	Arkuz	Общие вопросы Delphi	1	18.04.2009 00:15
Drag&Drop	shtuceron	Общие вопросы Delphi	3	09.04.2008 19:04