Вы находитесь: Jquery
ЛИЧНЫЙ КАБИНЕТ
ТЕЛЕФОН
+7 (903) 203-41-40

Jquery

Сортировка элементов при помощи перетаскивания их курсором мыши.

Для интерактивной сортировки понадобятся две библиотеки.
 


Их необходимо добавить перед </head>

А на саму страницу скрипт:



Ну и какой-нибудь список:

  • Пункт списка 1
  • Пункт списка 2
  • Пункт списка 3

Теперь пункты списка можно "перетаскивать" курсором мышки.

Если новый порядок элементов необходимо сохранить в базе данных, то пример немного усложнится.

";
  • Пункт списка 1
  • Пункт списка 2
  • Пункт списка 3

В момент окончания перемещения элемента происходит загрузка файла sortable.php в блоке p c id="info". В этот файл происходит передача массива с новым порядком элементов. Далее происходит сохранение результата в базе данных. Вот код этого файла:

sortable.php


//Connect to  MySQL
$dbhost = "********";
$dbusername = "******";
$dbpass = "********";
$dbname = "********";
mysql_connect($dbhost,$dbusername,$dbpass) or die("Dont connect to server");
mysql_select_db($dbname) or die ("Dont connect to bd");

$itemsArray = array_reverse(explode(',', $_GET['items']));
for($item = 1; $item <= count($itemsArray); $item++)
    {
    $sql = "UPDATE `list_table` SET num=" . $item . " WHERE id=" . $itemsArray[$item-1] . " LIMIT 1";
    mysql_query($sql) or die('Перемещение не выполнено');
    }
echo 'Порядок был успешно изменен.';