Drag and Drop using jquery and php

Asked
Active3 hr before
Viewed126 times

7 Answers

using
90%

initialize drag() function on mouse hover, to prepare the drag UI.,id “content_box_drag” is a static draggable environment.,create few drag elements from PHP (static).,create a dropbox “content_box_drop”, so that users can drop the dragged element into it for selection.

Basic CSS to style our drag and drop UI

.content_box {
   padding: 5 px;
   width: 300 px;
   float: left;
   height: 250 px;
   border: #00FFFF solid 1px; 
  font-family:Verdana, Arial, Helvetica, sans-serif;
  margin:10px;
  overflow:auto;
  color:# 999999;
   font - size: 14 px;
}

.content_holder_box {
   width: 300 px;
   float: right;
   height: 250 px;
   border: #0099FF solid 1px;
  padding:10px;
  margin:10px;
  color:# 999999;
   font - size: 14 px;
}

.content_holder_box: hover {
   border: #0099FF solid 1px; 
}

.dragelement{ 
  padding:5px; 
  margin:3px; 
  width:270px; 
  border:# 99 FF66 solid 1 px;
   background - color: #E2FFC6;
   cursor: move;
   color: #000;
  font-size:13px;
}

.dropper{ width:270px;
  height:125px;
  margin:10px; 
}

.dropper_hover{ 
  border:# 999999 dashed 1 px;
   background: url(.. / images / darrow.jpg) center no - repeat;
}

//you can show arrow image to suggest where user has to drop selected UI.
load more v
88%

Once the reorder link is clicked, drag & drop feature is enabled to reorder the images.,The following jQuery code is used to enable the jQuery UI Draggable & Sortable features and implement the drag & drop functionality.,The index.php file displays the images on the web page and allows the user to reorder images by drag and drop.,The orderUpdate.php file is called by the Ajax request and receive the current images order from the list page (index.php) through Ajax.

Before getting started, take a look at the files structure to build drag and drop reorder images functionality using jQuery, Ajax, PHP, and MySQL.

dragdrop_reorder_images / ├──index.php├── orderUpdate.php├── DB.class.php├── js / │├──jquery.min.js│└── jquery - ui.min.js├── css / │└──style.css└── images /
load more v
72%

In this example, we are having draggable product items. We are adding these items to cart by dragging and dropping. The draggable product data can be transferred to PHP via an AJAX call to perform cart Actions.,PHP Shopping Cart by jQuery Drag and Drop,In this tutorial, we are going to see a shopping cart example. In this example, we are adding products to cart by using drag and drop. In a previous tutorial, we have seen PHP shopping cart with jQuery AJAX.,This code is for handling add-to-cart with jQuery drag and drop. In the previous tutorial, we have seen how to move images using jQuery drag and drop.

<div id="product-grid">
	<div class="txt-heading">Products</div>
	<?php
	$product_array = $db_handle->runQuery("SELECT * FROM tblproduct ORDER BY id ASC");
	if (!empty($product_array)) { 
		foreach($product_array as $key=>$value){
	?>
		<div class="product-item" data-name="<?php echo $product_array[$key]["name"]; ?>" data-price="<?php echo "$".$product_array[$key]["price"]; ?>">
			<div class="product-image"><img class="draggable" src="<?php echo $product_array[$key]["image"]; ?>" id="<?php echo $product_array[$key]["code"]; ?>"></div>
			<div><strong><?php echo $product_array[$key]["name"]; ?></strong></div>
			<div class="product-price"><?php echo "$".$product_array[$key]["price"]; ?></div>
		</div>
	<?php
			}
	}
	?>
</div>
<div class="clear-float"></div>
<div id="shopping-cart">
	<div class="txt-heading">Shopping Cart <a id="btnEmpty" onClick="cartAction('empty','');">Empty Cart</a></div>
	<div id="cart-item"></div>
</div>
load more v
65%

Drag and drop is a very user friendly feature that allows users to reorder element by drag and drop on desired position. If you’re developing a web application that listing items or images, then you can easily add drag and drop functionality in your web application to increase user experience. You just need to use jQuery UI that enables you to easily add draggable functionality on items list.,So let’s create example to implement drag and drop reorder with jQuery, PHP and MYSQL. The file structure for the example is following.,In our previous tutorial you have learned Data Export to Excel with PHP and MySQL. So in this tutorial you will learn how to implement drag and drop sorting functionality with jQuery and PHP.,As we will display images list from database, so first we will create MySQL database table reorder and store images with their order.

As we will display images list from database, so first we will create MySQL database table reorder and store images with their order.

CREATE TABLE `reorder`(
   `id`
   int(11) NOT NULL,
   `image_name`
   varchar(255) COLLATE utf8_unicode_ci NOT NULL,
   `display_order`
   int(5) NOT NULL DEFAULT '0',
   `created`
   datetime NOT NULL,
   `modified`
   datetime NOT NULL,
   `status`
   enum('1', '0') COLLATE utf8_unicode_ci NOT NULL DEFAULT '1'
) ENGINE = InnoDB DEFAULT CHARSET = utf8 COLLATE = utf8_unicode_ci;
load more v
75%

Step 1 : Create Sorting Items Table,Step 2 : Database Configuration config.php , <title>Dynamic Drag and Drop Table Rows In PHP Mysql</title> ,PHP MySQL Country State City Dropdown using Ajax Example

CREATE TABLE IF NOT EXISTS `sorting_items`(
   `id`
   int(10) NOT NULL AUTO_INCREMENT,
   `title`
   varchar(120) NOT NULL,
   `description`
   text NOT NULL,
   `position_order`
   int(11) NULL,
   PRIMARY KEY(`id`)
) ENGINE = MyISAM DEFAULT CHARSET = latin1 AUTO_INCREMENT = 7;
load more v
40%

4. Display records on page in incomplete todo list items to the left side of page.,2. PHP code to connect to database.,6. Complete list items will be displayed to the right side of the page.,3. Create php code to fetch incomplete and complete todo list items

First we create a database test and table  listitems and then insert sample data into the table.

CREATE DATABASE test;

CREATE TABLE `listitems`(

   `id`
   int(11) NOT NULL,

   `name`
   varchar(100) NOT NULL,

   `detail`
   varchar(400) NOT NULL,

   `is_completed`
   enum('yes', 'no')

   NOT NULL DEFAULT 'no') ENGINE = InnoDB AUTO_INCREMENT = 7 DEFAULT CHARSET = latin1;

ALTER TABLE `listitems`
ADD PRIMARY KEY(`id`);

-- --Dumping data
for table `listitems`--

INSERT INTO `listitems`(`id`, `name`, `detail`, `is_completed`)

VALUES(1, 'Shopping', 'Go for shopping on weekend', 'no'),

   (2, 'Watch Movie', 'After Shopping, go to Cinema and watch movie', 'no'),

   (3, 'Buy Books', 'Buy books from market', 'no'),

   (4, 'Go for Running', 'In morning go out to park for running', 'no'),

   (5, 'Cooking', 'Do cooking this weekend', 'no'),

   (6, 'Write and Article', 'Write an article for the blog', 'no');
load more v
22%

Step 1: Create Database Table,Step 3: Create Database Configuration File, <title>Dynamic Drag and Drop table rows in PHP Mysql- ItSolutionStuff.com</title>, <h3 class="text-center">Dynamic Drag and Drop table rows in PHP Mysql - ItSolutionStuff.com</h3>

CREATE TABLE IF NOT EXISTS `sorting_items`(`id`
   int(10) NOT NULL AUTO_INCREMENT, `title`
   varchar(120) NOT NULL, `description`
   text NOT NULL, `position_order`
   int(11) NOT NULL, PRIMARY KEY(`id`)) ENGINE = MyISAM DEFAULT CHARSET = latin1 AUTO_INCREMENT = 7;
load more v

Other "using-undefined" queries related to "Drag and Drop using jquery and php"