Drag & Drop-им вместе с PHP и jQuery

Возможность применения эффекта drag & drop, и сохранение данных после перестановки - это прекрасная возможность создать дружелюбный интерфейс, тем более что это реализуется, грубо говоря, несколькими строчками кода на jQuery. Всё что вам нужно сделать, так это подключить jQuery UI и прочитать данный урок!

demosourse

В этом уроке мы рассмотрим 2 основных PHP файла: index.php, в котором будет расположен список к которому мы применим эффект drag & drop и updateList.php, отвечающий за сохранение новой последовательности списка в базу данных, используя MySQL. В добавок к этому вам потребуется файл connect.php для того, чтобы создать подключение к БД.

Код

$(document).ready(function(){
      function slideout(){
  setTimeout(function(){
  $("#response").slideUp("slow", function () {
      });

}, 2000);}

    $("#response").hide();
    $(function() {
    $("#list ul").sortable({ opacity: 0.8, cursor: 'move', update: function() {

            var order = $(this).sortable("serialize") + '&update=update';
            $.post("updateList.php", order, function(theResponse){
                $("#response").html(theResponse);
                $("#response").slideDown('slow');
                slideout();
            });
        }
        });
    });
});

Вот вкратце что делает этот код:

  • Код начинается с простой функции, которая выводит инфо сообщение с результатом изменения порядка в списке.
  • Далее мы реализуем эффект drag & drop. Отправляем значение ‘order’ посредством ajax запроса в php файл, который произведёт изменения в БД.
  • После того как ajax сделает своё «грязное дело», мы отобразим результат в блоке #response.

Приведу вам фрагмент кода, который извлекает порядок элементов списка из базы:

<div id="list">

  <div id="response"> </div>
  <ul>
    <?php
              include("connect.php");
        $query  = "SELECT id, text FROM dragdrop ORDER BY listorder ASC";
        $result = mysql_query($query);
        while($row = mysql_fetch_array($result, MYSQL_ASSOC))
        {

        $id = stripslashes($row['id']);
        $text = stripslashes($row['text']);

        ?>
    <li id="arrayorder_<?php echo $id;?>"><?php echo $id;?> <?php echo $text;?>
      <div class="clear"></div>
    </li>
    <?php } ?>
  </ul>
</div>

Ниже находится содержимое файла ‘updateList.php’. Его содержание говорит само за себя. Мы используем скрипт MySQL update, вызываемый в цикле foreach, который обновляет значения в базе и выводит ответ.

<?php
include("connect.php");
$array  = $_POST['arrayorder'];
if ($_POST['update'] == "update"){
$count = 1;
    foreach ($array as $idval) {
        $query = "UPDATE dragdrop SET listorder = " . $count . " WHERE id = " . $idval;
        mysql_query($query) or die('Error, insert query failed');
        $count ++;
    }
    echo 'All saved! refresh the page to see the changes';
}
?>

Надеюсь, данный эффект будет вам полезен!

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.papermashup.com/drag-drop-with-php-jquery/
Перевел: Станислав Протасевич
Урок создан: 24 Марта 2011
Просмотров: 50922
Правила перепечатки


5 последних уроков рубрики "jQuery"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 24 Марта 2011 23:48
    ruslik97
    Прикольно)
  • 24 Марта 2011 23:58
    Ygreec
    Вот! наконец-то! Как я и просил в предыдущем примере для драг-н-дропса, чтобы инфа сохранялась... только вопрос - после очищения кукис инфа сохранится или исчезнет? Это очень важно знать мне...
    • 25 Марта 2011 00:56
      Евгений Болгов
      Здесь не используется кукис
  • 25 Марта 2011 00:03
    Kapi
    Где тут кукисы? здесь идёт всё в базу
  • 25 Марта 2011 00:09
    truehazard
    так быстро пробежался по коду здесь используется база а не куки! за урок спасибо, реально давно просили )))))
  • 25 Марта 2011 00:31
    notbot
    А шо такое "-им"?
  • 25 Марта 2011 06:38
    budzin
    Вот спс :) наконец-то показали как сохранять этот drag and drop!
  • 25 Марта 2011 10:16
    kindofbear
    я тупое существо, объясните мне пожалуйста откуда взялось имя переменной arrayorder в php
    • 25 Марта 2011 12:02
      Станислав Протасевич
      Смотри первый фрагмент кода. Строки 13: формируем переменную order. 14: посылаем data через POST в updateList.php; В третьем фрагменте кода, достаём значение через POST (3 строка) Для подробного разбора посмотри в Firebug что формируется в $(this).sortable("serialize")
      • 26 Марта 2011 11:09
        kindofbear
        нет. откуда взялось НАЗВАНИЕ переменной. если через форму передаем, то мы указываем name к полю. через аякс - тоже указывается при передаче. а тут где указано имя переменной куда сохранится массив?
  • 25 Марта 2011 12:49
    Bender_ASS
    ЕЩЕ БЫ они позицию сохраняли и в них можно было бы текст менять !!! Очень нужна такая штука для создания стены заданий в отделе .
  • 25 Марта 2011 15:46
    rubyx
    Drag & Drop-им вместе :) с этого хорошо создавать для детей какие поучительные игрушки, например типа правил дорожного движения...
  • 25 Марта 2011 20:59
    notbot
    Скажите, пожалуйста, за что у меня предупреждение!
  • 25 Марта 2011 23:47
    Ygreec
    Караул! Хотел на мастерхосте установить, но выводит сообщение "ошибка", видимо не та версия пхп... или не знаю что... Плиз, подскажите, что надо сделать чтобы заработало, очень нужный скрипт...
    • 26 Марта 2011 00:03
      notbot
      Ты конечно очень точно описал ошибку... Тут телепатов нет.
      • 26 Марта 2011 11:40
        Ygreec
        Извиняюсь... у меня площадка на масерхост, с поддержкой ПХП5.2 Файл index.php открывается пустой белой страницей со словом "ошибка" в левом углу. Если посмотреть файл updatelist.php то там как раз прописана строчка if ($_POST['update'] == "update"){ $count = 1; foreach ($array as $idval) { $query = "UPDATE dragdrop SET listorder = " . $count . " WHERE id = " . $idval; mysql_query($query) or die('Ошибка'); $count ++; } echo 'Информация сохранена!';
        • 26 Марта 2011 21:00
          notbot
          Проблемы с БД.
          • 26 Марта 2011 21:23
            Ygreec
            а в чем именно? может если не трудно, подскажете что надо исправить? исходники ровно те же, я ничего не менял... просто если сможете найти в чем проблема, буду благодарен...
            • 26 Марта 2011 23:23
              truehazard
              ну просто поменяй на свои ключи доступа
              • 26 Марта 2011 23:55
                Ygreec
                спасибо, однако прошу понять чайника, не смыслящего в пхп... как могут выглядеть мои ключи доступа? если не трудно, вклейте код с измененными ключами, а я переделаю под свои параметры, если это возможно... либо может дадите ссылку, где говорится о таких ключах?...
                • 27 Марта 2011 11:36
                  notbot
                  Где-то в исходниках (точно не знаю, не скачивал)... Я думаю, кто-нибудь подскажет...
                  • 27 Марта 2011 12:56
                    Ygreec
                    в исходнике (в нужном файле) всего несколько строчек, поэтому для знающего человека - это раз плюнуть... может кто-нибудь не сочтет за труд скачать исходники и помочь мне в этом вопросе? Спасибо!
                    • 27 Марта 2011 20:37
                      truehazard
                      в файле connect.php заполняешь переменные:
                      $dbhost = "localhost"; //в 90 процентах
                      $dbuser	= ""; //имя пользователя
                      $dbpass = ""; //пароль к нему
                      $dbname	= ""; //имя базы
                      
                      ну и само сабой сделай дамп базы:
                      • 27 Марта 2011 21:38
                        Ygreec
                        Спасибо за отзывчивость... правда со знаниями чайника все равно ничего не получается... почитал про дамп базы, вроде в dragdrop.sql все так и прописано, но опять ничего не работает...
                        • 27 Марта 2011 23:19
                          notbot
                          Надо с помощью phpmyadmin выполнить dragdrop.sql
                        • 14 Апреля 2012 22:07
                          Имя Фамилия
                          $dbhost = "localhost";
                          $dbuser	= "root"; //имя пользователя
                          $dbpass = ""; //оставь пустым
                          $dbname	= "база"; //база в которую сделал дамп dragdrop.sql
                          
  • 26 Марта 2011 17:31
    xakepmega
    в updaterlist.php просто гениальное решение с обновлением полей в базе, подумаешь каких-то 5-10 запросов, вместо одного...
  • 2 Апреля 2011 12:22
    sanek63
    Конечно все красиво и интересно получается, но вот плохо только что два скрипта, размещенных на одной и той же странице не работают, работает только тот, который прописан выше, неужели никто с этим не сталкивался?
  • 5 Апреля 2011 13:15
    xom9lk
    ой: а если тысяча позиций, что-бы поменять одну - придется делать тысячу запросов к бд
  • 4 Августа 2011 18:45
    kvasnevskiy
    Очень полезная штука
  • 23 Сентября 2011 15:09
    Oleg_web
    Как сделать его горизонтальными блоками? И менять их между собой. Подскажите, надо сделать проект такой, "горю"!
  • 29 Декабря 2011 00:47
    edikreg
    Тут все было бы идеально, если бы не одно НО. Допустим в таблице будет не 7 записей, а 5 тысяч (с постраничным выводом) то запросов к базе будет 5000! вопрос - как узнать начальный и конечные элементы, чтобы изменить в базе: - начальную позицию - конечную позицию - элементы между начальной и конечной позицией вот это предаст шарм этому коду!
  • 26 Февраля 2012 21:59
    DimitryG
    Классная тема! Спасибо! Вот только в IE9 не работает к сожалению
  • 14 Апреля 2012 22:05
    Имя Фамилия
    в ie9 не работает..а в ie8 работает почему?????
  • 18 Мая 2014 09:23
    TigerSml
    Получается, если 5000 позиций, надо поменять местами 5 позиций, это будет 25 000 запросов к бд? Выкинуть аякс вообще отсюда (или повесить событие на кнопку). Простой список li с добавленным внутрь тегом input:
    <input type="hidden" name="arrayorder[]" value="<? echo $id; ?>">
    ul, понятное дело, заключается в форму (а можно и аяксом). Нажал кнопку, отправился массив "arrayorder" постом в файл updateList.php. Сам запрос к БД в цикле закрыть if-ом:
    foreach ($array as $idval){
    if(isset($ArrayList[$idval]['listorder']) && $ArrayList[$idval]['listorder'] != $count) //тут запрос к БД
    $count ++;}
    
    где $ArrayList заранее полученный массив с позициями из БД, все равно в connect.php его надо получать, что бы вывести текст и id. имхо, далеко не идеал, но запросов к БД не может быть больше, чем позиций в БД, и то, макс. число запросов получаем только когда последний элемент был перемещен в самое начало, а если 10->1, то только 10 запросов и только 1 раз, а не переписывать все затронутые позиции при каждом изменении списка. ну и конечно:
    $query = "SELECT id, text, listorder FROM dragdrop ORDER BY listorder ASC";
    А так, спасибо, за код.
  • 6 Декабря 2014 17:45
    askello
    спасибо, полезный урок!!!
  • 11 Февраля 2016 12:39
    undeadline
    Получая на сервере переменную $array она парсится в Array([0]=>14,[1]=>15) 1 Я никак не могу понять каким образом появляется 1 после массива. И при выводе $idval получается 141,151
  • 3 Мая 2016 19:16
    Небог
    инструкция кидаете всё на локальный сервер в connect пишите например dbhost= "localhost"; $dbuser= "root"; $dbpass= ""; $dbname= "phpmyadmin"; далее идёте по адресу localhost/phpmyadmin по управлению базами данных, чтобы импортнуть таблицу из архива dragdrop.sql
  • Комментарий удален
    • 26 Марта 2011 21:01
      notbot
      +1. Не знаю, как тебе, а мне (я писал камменты помягче) сделали одно предупреждение. Так и не пойму, за что!!!
^ Наверх ^