{"id":345,"date":"2010-06-02T23:21:36","date_gmt":"2010-06-02T22:21:36","guid":{"rendered":"https:\/\/www.hutsky.cz\/blog\/?p=345"},"modified":"2010-06-02T23:21:36","modified_gmt":"2010-06-02T22:21:36","slug":"drag-and-drop-to-change-position-of-elements","status":"publish","type":"post","link":"https:\/\/www.hutsky.cz\/blog\/2010\/06\/drag-and-drop-to-change-position-of-elements\/","title":{"rendered":"Drag and drop to change position of elements"},"content":{"rendered":"

Long time ago, I was trying to figure out how to change position of items in a list. Let’s say there’s a list of product in an e-commerce solution and the user wants to choose what items go first and what go last. What I used back then was to create a simple form which called a function that takes the id of the previous or next item and swaps it for the current item’s id and vice versa. It was simple, but it worked. But now I needed something more user-friendly, after all it’s true that this solution was not very convenient for long lists. This is where the motto of jQuery “write less, do more”<\/em> comes handy.<\/p>\n

See demo here.<\/a><\/p>\n

First, you need a table containing the items:<\/p>\n

\r\n\r\n          
item 1<\/td><\/tr>\t\r\n          
item 2<\/td><\/tr>\t\r\n          
item 3<\/td><\/tr>\t\r\n          
item 4<\/td><\/tr>\t\r\n          
item 5<\/td><\/tr>\t\r\n          
item 6<\/td><\/tr>\t\r\n<\/table>\r\n<\/pre>\n
Now download jQuery<\/a> and the Table Drag and Drop plugin<\/a> (if you are new to jQuery, there’s great documentation on their page).<\/p>\n
Having installed jQuery file and the TableDnD plugin, we need to get things working. Include this in the head section of the website:<\/p>\n
<\/p>\n
\r\n$(document).ready(function() {\r\n\t$(\"#positions\").tableDnD({\r\n\t\tonDrop: function(table, row) {\r\n\t\tvar ordered_items = $.tableDnD.serialize('id');\r\n\t        $('#result').load(\"save_new_positions.php?\" + ordered_items);\r\n\t\t}\r\n\t});\r\n});\r\n<\/pre>\n
$(“#positions”).tableDnD()<\/strong> tells jQuery to apply the TableDnD plugin on the table with id positions<\/i>. As simple as it can ever get. You can try to drag and drop items here<\/a><\/p>\n
The last thing is to save the new positions to the database.
\n
onDrop: function(table, row)<\/strong> – this says that once you drop an item, something else happens
\n
var ordered_items = $.tableDnD.serialize(‘id’);<\/strong> – this puts all the items to an array (in the newly selected order)
\n
Now we use an AJAX function .load()<\/strong>
\n
$(‘#result’).load(“save_new_positions.php?” + ordered_items);<\/strong> – this tells jQuery to load whatever result we get form an external file save_new_positions.php<\/i> to a div with id result<\/i>. We also pass the ordered items array to the php file in the form of an url parameter.\n<\/p>\n
The last thing we need is the above mentioned save_new_positions.php<\/i> that will save the new positioning in the database.<\/p>\n
\r\n$positions = $_GET[\"positions\"];\r\necho 'saved in order: ';\r\nforeach ($positions as $key=>$option) {\r\n\t\techo $option . ', ';\r\n\t\t\/\/ this is where you can put your SQL query, maybe something like\r\n\t\t\/\/ $query = 'UPDATE table SET position = '.$key.' WHERE id = '.$option.' LIMIT 1';\r\n\t\t\/\/ mysql_query($query) or die (mysql_error());\r\n\t}\r\n<\/pre>\n
That’s all, you can see the demo here.<\/a> and you can find much more in the post this post was based on.<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Long time ago, I was trying to figure out how to change position of items in a list. Let’s say there’s a list of product in an e-commerce solution and the user wants to choose what items go first and …<\/p>\n
  Drag and drop to change position of elements<\/span> Read More »<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[14],"tags":[21,50,4],"class_list":["post-345","post","type-post","status-publish","format-standard","hentry","category-jquery","tag-ajax","tag-jquery","tag-php"],"_links":{"self":[{"href":"https:\/\/www.hutsky.cz\/blog\/wp-json\/wp\/v2\/posts\/345","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hutsky.cz\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hutsky.cz\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hutsky.cz\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hutsky.cz\/blog\/wp-json\/wp\/v2\/comments?post=345"}],"version-history":[{"count":39,"href":"https:\/\/www.hutsky.cz\/blog\/wp-json\/wp\/v2\/posts\/345\/revisions"}],"predecessor-version":[{"id":474,"href":"https:\/\/www.hutsky.cz\/blog\/wp-json\/wp\/v2\/posts\/345\/revisions\/474"}],"wp:attachment":[{"href":"https:\/\/www.hutsky.cz\/blog\/wp-json\/wp\/v2\/media?parent=345"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hutsky.cz\/blog\/wp-json\/wp\/v2\/categories?post=345"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hutsky.cz\/blog\/wp-json\/wp\/v2\/tags?post=345"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}