Drag and Drop Reorder Images using jQuery, Ajax, PHP & MySQL<\/a><\/span><\/p>\nBefore getting started, take a look at the file structure of the sample CodeIgniter Drag & Drop Image Reorder<\/b> application.<\/p>\ncodeigniter_drag_drop_reorder_images\/<\/span>\r\n\u251c\u2500\u2500 application\/<\/span>\r\n\u2502 \u251c\u2500\u2500 controllers\/<\/span>\r\n\u2502 \u2502 \u2514\u2500\u2500 Drag_drop.php\r\n\u2502 \u251c\u2500\u2500 models\/<\/span>\r\n\u2502 \u2502 \u2514\u2500\u2500 Image.php\r\n\u2502 \u2514\u2500\u2500 views\/<\/span>\r\n\u2502 \u2514\u2500\u2500 drag_drop\/<\/span>\r\n\u2502 \u2514\u2500\u2500 index.php\r\n\u2514\u2500\u2500 assets\/<\/span>\r\n \u251c\u2500\u2500 js\/<\/span>\r\n \u2502 \u2502\u2500\u2500 jquery.min.js\r\n \u2502 \u2514\u2500\u2500 jquery-ui.min.js\r\n \u251c\u2500\u2500 css\/<\/span>\r\n \u2502 \u2514\u2500\u2500 style.css\r\n \u2514\u2500\u2500 images\/<\/span>\r\n<\/pre>\nCreate Database Table<\/h2>\n
To store the file information and image order, a table is required in the database. The following SQL creates an images<\/code> table with some basic fields in the MySQL database.<\/p>\nCREATE<\/span> TABLE<\/span> `images`<\/span> (\r\n `id`<\/span> int<\/span>(11<\/span>) NOT<\/span> NULL<\/span> AUTO_INCREMENT,\r\n `file_name`<\/span> varchar<\/span>(100<\/span>) COLLATE<\/span> utf8_unicode_ci NOT<\/span> NULL<\/span>,\r\n `img_order`<\/span> int<\/span>(5<\/span>) NOT<\/span> NULL<\/span> DEFAULT<\/span> 0<\/span>,\r\n `created`<\/span> datetime NOT<\/span> NULL<\/span>,\r\n `modified`<\/span> datetime NOT<\/span> NULL<\/span>,\r\n PRIMARY KEY<\/span> (`id`<\/span>)\r\n) ENGINE<\/span>=InnoDB<\/span> DEFAULT<\/span> CHARSET<\/span>=utf8 COLLATE<\/span>=utf8_unicode_ci;<\/pre>\nController (Drag_drop.php)<\/h2>\n
The Drag_Drop controller handles the image listing and order update functionality.<\/p>\n
\n- __construct()<\/b> \u2013\n
\n- Loads Image model that helps to fetch and update image file info into the database.<\/li>\n<\/ul>\n<\/li>\n
- index()<\/b> \u2013\n
\n- Fetch all images from the database using the
getRows()<\/code> method of the Image model.<\/li>\n- Pass images data to the view.<\/li>\n<\/ul>\n<\/li>\n
- orderUpdate()<\/b> \u2013\n
\n- Retrieve the ID of the images from the AJAX POST request.<\/li>\n
- Update image order in the database using the
update()<\/code> method of the Image model.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<?php
defined<\/span>(<\/span>'BASEPATH'<\/span>) OR exit(<\/span>'No direct script access allowed'<\/span>);
class <\/span>Drag_Drop <\/span>extends <\/span>CI_Controller <\/span>{
function <\/span>__construct<\/span>() {
<\/span>parent<\/span>::<\/span>__construct<\/span>();
<\/span>\/\/ Load file model
<\/span>$this<\/span>-><\/span>load<\/span>-><\/span>model<\/span>(<\/span>'image'<\/span>);
}
function <\/span>index<\/span>(){
<\/span>$data <\/span>= array();
<\/span>\/\/ Get images data from the database
<\/span>$data<\/span>[<\/span>'images'<\/span>] = <\/span>$this<\/span>-><\/span>image<\/span>-><\/span>getRows<\/span>();
<\/span>\/\/ Pass the images data to view
<\/span>$this<\/span>-><\/span>load<\/span>-><\/span>view<\/span>(<\/span>'drag_drop\/index'<\/span>, <\/span>$data<\/span>);
}
function <\/span>orderUpdate<\/span>(){
<\/span>\/\/ Get id of the images
<\/span>$ids <\/span>= <\/span>$this<\/span>-><\/span>input<\/span>-><\/span>post<\/span>(<\/span>'ids'<\/span>);
if(!empty(<\/span>$ids<\/span>)){
<\/span>\/\/ Generate ids array
<\/span>$idArray <\/span>= <\/span>explode<\/span>(<\/span>\",\"<\/span>, <\/span>$ids<\/span>);
<\/span>$count <\/span>= <\/span>1<\/span>;
foreach (<\/span>$idArray <\/span>as <\/span>$id<\/span>){
<\/span>\/\/ Update image order by id
<\/span>$data <\/span>= array(<\/span>'img_order' <\/span>=> <\/span>$count<\/span>);
<\/span>$update <\/span>= <\/span>$this<\/span>-><\/span>image<\/span>-><\/span>update<\/span>(<\/span>$data<\/span>, <\/span>$id<\/span>);
<\/span>$count <\/span>++;
}
}
return <\/span>true<\/span>;
}
}<\/span><\/pre>\nModel (Image.php)<\/h2>\n
The Image model handles the database related operations (fetch and update).<\/p>\n
\n- __construct()<\/b> \u2013 Define the table name where the images data will be stored.<\/li>\n
- getRows()<\/b> \u2013\n
\n- Fetch the file’s data from the database based on the image order.<\/li>\n<\/ul>\n<\/li>\n
- update()<\/b> \u2013\n
\n- Update image order into the database using the
update()<\/code> function of CodeIgniter Query Builder Class.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<?php
defined<\/span>(<\/span>'BASEPATH'<\/span>) OR exit(<\/span>'No direct script access allowed'<\/span>);
class <\/span>Image <\/span>extends <\/span>CI_Model<\/span>{
function <\/span>__construct<\/span>() {
<\/span>$this<\/span>-><\/span>tableName <\/span>= <\/span>'images'<\/span>;
}
<\/span>\/*
* Fetch files data from the database
* @param id returns a single record if specified, otherwise all records
*\/
<\/span>public function <\/span>getRows<\/span>(<\/span>$id <\/span>= <\/span>''<\/span>){
<\/span>$this<\/span>-><\/span>db<\/span>-><\/span>select<\/span>(<\/span>'*'<\/span>);
<\/span>$this<\/span>-><\/span>db<\/span>-><\/span>from<\/span>(<\/span>$this<\/span>-><\/span>tableName<\/span>);
<\/span>$this<\/span>-><\/span>db<\/span>-><\/span>order_by<\/span>(<\/span>'img_order'<\/span>, <\/span>'asc'<\/span>);
<\/span>$query <\/span>= <\/span>$this<\/span>-><\/span>db<\/span>-><\/span>get<\/span>();