Drag and Drop in PHP is a way to select a virtual object with a pointing device.
The user “grabs” the object and drags it to a different place or onto another virtual object.
About The Project
The Drag and Drop Image Upload was developed using PHP, HTML, CSS and JavaScript, the idea of this simple Drag and Drop PHP Framework tutorial is to show you how to create things in a simple and understandable way. It does not focus on security and authenticity etc..
A Drag and Drop Website Builder Software is a very common feature. It is when you “grab” an image or an object and drag it to a different square location.
This Drag and Drop PHP Builder also includes a downloadable Drag and Drop Image Upload PHP JQuery source code for free, just find the downloadable source code below and click to start downloading.
To start creating this Drag and Drop In PHP makes sure that you have sublime or any platform of PHP installed in your computer.
Project Information’s
| Project Name: | Drag and Drop Image Upload In PHP With Source Code |
| Language/s Used: | PHP |
| PHP version (Recommended): | 5.6.3, 7.4.12 |
| Database: | None |
| Type: | Website, Web Application |
| Developer: | IT SOURCECODE |
| Updates: | 0 |
Steps On How To Create Drag and Drop In PHP With Source Code
Time needed: 5 minutes
These are the steps on how to create Drag and Drop In PHP With Source Code.
- Create folder.
First, create a folder from your “xampp” folder under “htdocs” folder and name it.
- Open folder.
Second, open “sublime text” and open the project folder you’ve created.
- Create a php file.
Third, create the php file under your project folder and name it into “index.php“.
- Paste the code given below.
Final, paste all the codes or the complete source code given below into your php file.
How To Make Drag and Drop File Upload In PHP?
CSS Design
– The code given below which is the CSS design of this simple project, you can also copy the codes given below and paste it into your file.
<style>
#div1 {width:150px;height:150px;padding:10px;border:1px solid #aaaaaa;}
#left
{
border: 1px solid #aaaa;
width: 200px;
float: left
}
#right
{
border: 1px solid #aaaa;
width: 200px;
float: right;
}
#container
{
width: 580px;
margin: auto;
}
p
{
font-size: 25px;
text-align: center;
}
</style>Drag and Drop Script
– The code given below which is the JavaScript of this simple project, you can also copy the codes given below and paste it into your file.
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>HTML Form
– The code given below which is the html form of this simple project, you can also copy the codes given below and paste it into your file.
<body> <div id="container"> <p>Drag and Drop Image into the squares</p> <div id="left"> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <br> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <br> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <br> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <br> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <br> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <br> </div> <img id="drag1" src="drag.jpg" draggable="true" ondragstart="drag(event)" width="150"> <div id="right"> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <br> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <br> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <br> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <br> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <br> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <br> </div> </div> </body>
Drag and Drop Complete Source Code
<!DOCTYPE HTML>
<html>
<head>
<style>
#div1 {width:150px;height:150px;padding:10px;border:1px solid #aaaaaa;}
#left
{
border: 1px solid #aaaa;
width: 200px;
float: left
}
#right
{
border: 1px solid #aaaa;
width: 200px;
float: right;
}
#container
{
width: 580px;
margin: auto;
}
p
{
font-size: 25px;
text-align: center;
}
</style>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div id="container">
<p>Drag and Drop Image into the squares</p>
<div id="left">
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
</div>
<img id="drag1" src="drag.jpg" draggable="true" ondragstart="drag(event)" width="150">
<div id="right">
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
</div>
</div>
</body>
</html>
Download Source Code below
Anyway, if you want to level up your programming knowledge, especially PHP, try this new article I’ve made for you Best PHP Projects With Source Code Free Download.
Summary
This Simple Project With Source Code was developed using PHP, HTML, CSS and JavaScript.
In this tutorial you will learn on How to create Drag and Drop In PHP in an easy way and a short period of time.
Frequently Asked Questions
How does this PHP project work?
Built with vanilla PHP (no framework) and MySQL backend. Standard structure: form HTML, PHP script handlers, MySQL via PDO or mysqli, sessions for auth, Bootstrap for responsive layout. Ready to extend for BSIT capstone scope.
What PHP and MySQL versions does this project require?
Most projects in this batch run on PHP 7.4 to PHP 8.2 with MySQL 5.7+ or MariaDB 10+. A few older projects need PHP 5.6 (deprecated, use XAMPP 7.x). To run: install XAMPP / WAMP / Laragon, extract project to htdocs, import the included .sql file via phpMyAdmin, edit the connection file (usually config.php or db_connect.php) with your DB credentials, browse to the project URL in your browser.
How do I set up the database for this PHP project?
Open phpMyAdmin (http://localhost/phpmyadmin/ on XAMPP), create a new empty database with the name specified in the project’s config.php. Click the Import tab, choose the included .sql file, click Go. Then edit config.php (or includes/connection.php) with: ‘localhost’, your MySQL username (usually ‘root’), your MySQL password (usually blank for XAMPP), and the database name.
Can I use this PHP project for a BSIT capstone or thesis?
Yes, but extend it. A bare CRUD app is too narrow for full capstone scope. Add: user roles via session checks, reports/dashboards (Chart.js + AJAX), PDF exports (TCPDF library), email notifications (PHPMailer), real domain extension (analytics, audit log, multi-branch support). Pair with Chapter 1-5 documentation matching your panel’s rubric.
Why am I getting ‘connection error’ or ‘undefined function mysqli_connect’?
Three common PHP issues: (1) Connection error: Apache + MySQL services not running in XAMPP control panel, OR database name in config.php does not match what you created in phpMyAdmin. (2) ‘undefined function mysqli_connect’: MySQL extension not enabled, in php.ini uncomment extension=mysqli (then restart Apache). (3) ‘No such file or directory’: MySQL socket path wrong, use 127.0.0.1 instead of localhost in the connection string.
Where can I find more PHP projects with source code?
Browse the PHP Projects hub for the full library (300+ vanilla PHP systems). For modern PHP MVC alternatives see Laravel Projects (74 systems) or CodeIgniter Projects (32 systems). For BSIT-focused capstone idea lists see 150 Best Capstone Project Ideas.
Related PHP Projects
- Drop Database Using Mysqladmin
- Image Crop In PHP With Source Code
- Populate Drop Down List From Database Using PHP MySQLi
- Image Editor In PHP With Source Code
- Art Gallery Project In PHP With Source Code
- POS In PHP With Free Source Code
Inquiries
If you have any questions or suggestions about Drag and Drop In PHP With Source Code , please feel free to leave a comment below.