Dear friends, help, who fumbles in JS. I will be very grateful to someone who will help make a simple script for sorting tables. Let's say I have a table

<table> <tr> <TD>1</TD> <TD>2</TD> </tr> <tr> <TD>3</TD> <TD>3</TD> </tr> <table>

It is desirable, without using the jQuery library, to do the sorting by drag and drop, after which ajax request is immediately sent to save the current position in the database.

    3 answers 3

    Do you also need ajax without jQuery? What is the reason for abandoning jQuery? No need to reinvent the bikes, use the ready-made jquery sortable plugin

    Page

     <script> $(function() { $("#sortable").sortable( { cursor: 'move', update: function() { $.ajax({ url: '<?=$site_link;?>/sort_save/', // ссылка на обработчик type: "POST", data: { order: $('#sortable').sortable("toArray") }, success: function (data) { // обработка если надо }, error: function () { // обработка если надо }); } }); $("#sortable").disableSelection(); }); </script> <ul id="sortable"> <!-- Массив для сортировки с id записи и именем --> <?if($array):foreach($array as $item):?> <li id="sort-<?=$item['id'];?>"><?=$item['name'];?></li> <?endforeach; endif;?> </ul>

    Handler on the server

     function sort_save(){ $error = false; $order = $_POST['order']; foreach($order as $i=>$id){ $post['sort'] = $i; $id = str_replace("sort-", "", $id); $result = base::sql_edit("my_table", $post, "where id_sitemap = '$id'"); // update в базе if(!$result) $error = true; } if($error){ // обработка ошибки } }
    • the fact is that in js I'm not very strong, jquery is a very heavy library, but I will not mind and if you present me a solution on jquery, all the more you need to form a query with each drag, but I don’t know honestly how to do it Runet29
    • I added a completely ready code to the message, which I use myself. - ilovetrancekrsk
     <ul id="sortbl"> <li id="1">1</li> <li id="2">2</li> ...... <li id="N">N</li> </ul> $("sortbl").sortable({ update: function(event, ui){ var position = ui.item.prevAll().length + 1; $.post(ACTION_URL,{id: ui.item.attr("id"), position: position}, function(data){ alert(data); }); } });

    ACTION_URL - a script that makes an update in the database, writes a new position for the id element.

      Can I ask a question on this topic too? (I don’t want to create a new topic). Exactly the same, but another is already a problem. Sending a request ajax-ohm, dragging, and. D g is not a problem. About ui no problem. The problem is that the table that stores this data every 5 minutes is completely cleared by cron (truncate table, the mysql database), and new records are inserted. The records can be the same and repeat the old ones, or they can even appear new, which did not appear before deleting the previous records. And managers need to somehow distribute the time of customer requests, dragging. I thought it might somehow create some kind of table, and write IDs to it, and sort them. But while it is still foggy ... What advice do you have ?? I would be glad only. :)