Drag and drop and clone

Drag and drop and clone

A. Drag, drop and clone

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Drag, Drop & Clone</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<style>
.draggable { width: 100px; padding: 10px; background: lightblue; margin: 10px; cursor: grab; }
.droppable { width: 300px; height: 200px; background: lightgray; padding: 10px; border: 2px dashed #000; }
</style>
</head>
<body>

<div class="draggable">Drag Me</div>
<div class="draggable">Clone Me</div>

<div class="droppable">Drop Here</div>

<script>
$(function() {
$(".draggable").draggable({
helper: "clone",
revert: "invalid"
});

$(".droppable").droppable({
accept: ".draggable",
drop: function(event, ui) {
var clone = $(ui.helper).clone();
clone.removeClass("ui-draggable-dragging");
clone.draggable({ containment: "document" });
$(this).append(clone);
}
});
});
</script>

</body>
</html>

B. Drag and drop and store into database using jquery and php

CREATE DATABASE drag_drop_db;

USE drag_drop_db;

CREATE TABLE dropped_items (
id INT AUTO_INCREMENT PRIMARY KEY,
item_name VARCHAR(255) NOT NULL,
position_x INT NOT NULL,
position_y INT NOT NULL
);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Drag, Drop & Save to DB</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<style>
.draggable { width: 100px; padding: 10px; background: lightblue; margin: 10px; cursor: grab; }
.droppable { width: 400px; height: 300px; background: lightgray; padding: 10px; border: 2px dashed #000; position: relative; }
.cloned { position: absolute; }
</style>
</head>
<body>

<div class="draggable">Item 1</div>
<div class="draggable">Item 2</div>

<div class="droppable">Drop Here</div>

<script>
$(document).ready(function() {
// Load stored items on page load
$.get("fetch_items.php", function(data) {
$(".droppable").append(data);
$(".cloned").draggable({ containment: ".droppable" });
});

$(".draggable").draggable({
helper: "clone",
revert: "invalid"
});

$(".droppable").droppable({
accept: ".draggable",
drop: function(event, ui) {
var clone = $(ui.helper).clone();
var offset = $(this).offset();
var xPos = event.pageX - offset.left;
var yPos = event.pageY - offset.top;

clone.removeClass("ui-draggable-dragging").addClass("cloned").css({
left: xPos,
top: yPos,
position: "absolute"
}).draggable({ containment: ".droppable" });

$(this).append(clone);

// Save dropped item to database
$.post("save_item.php", {
item_name: clone.text(),
position_x: xPos,
position_y: yPos
});
}
});
});
</script>

</body>
</html>

save_item.php

<?php
$connection = new mysqli("localhost", "root", "", "drag_drop_db");

if ($connection->connect_error) {
die("Connection failed: " . $connection->connect_error);
}

$item_name = $_POST['item_name'];
$position_x = $_POST['position_x'];
$position_y = $_POST['position_y'];

$sql = "INSERT INTO dropped_items (item_name, position_x, position_y) VALUES ('$item_name', '$position_x', '$position_y')";

if ($connection->query($sql)) {
echo "Item saved!";
} else {
echo "Error: " . $connection->error;
}

$connection->close();
?>
fetch_items.php

<?php
$connection = new mysqli("localhost", "root", "", "drag_drop_db");

if ($connection->connect_error) {
die("Connection failed: " . $connection->connect_error);
}

$result = $connection->query("SELECT * FROM dropped_items");

while ($row = $result->fetch_assoc()) {
echo "<div class='cloned' style='left: {$row['position_x']}px; top: {$row['position_y']}px; position: absolute;'>{$row['item_name']}</div>";
}

$connection->close();
?>

 

 

Leave a Reply