Drag and Drop with Swapy and PHP
Hello , You might had issues with drag and drop options in your dashboard.
here i found a new javascript library that helps to position our widgets in your dashboard.
Here is the code for make a drag and drop with swapy and php .
here i added the option to load the divs in specified order , once you change the position it will update the cookie and save the position
<?php
// Check if a cookie exists
$swapyOrder = isset($_COOKIE['swapyOrder']) ? json_decode($_COOKIE['swapyOrder'], true) : ['item2', 'item1', 'item3'];
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Swapy with PHP Cookie</title>
<style>
.container {
display: flex;
gap: 20px;
}
.section {
width: 100px;
height: 100px;
border: 1px solid black;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div class="container">
<div class="section" data-swapy-slot="slot1">
<div data-swapy-item="item1">Item 1</div>
</div>
<div class="section" data-swapy-slot="slot2">
<div data-swapy-item="item2">Item 2</div>
</div>
<div class="section" data-swapy-slot="slot3">
<div data-swapy-item="item3">Item 3</div>
</div>
</div>
<script src="https://unpkg.com/swapy/dist/swapy.min.js"></script>
<script>
const container = document.querySelector('.container');
const swapy = Swapy.createSwapy(container);
// Set the initial order from PHP cookie
const initialOrder = <?php echo json_encode($swapyOrder); ?>;
console.log('Initial Order:', initialOrder);
// Function to reorder elements based on initialOrder
function setInitialOrder(order) {
const items = document.querySelectorAll('[data-swapy-item]');
const slots = document.querySelectorAll('[data-swapy-slot]');
// Create a map for quick lookup
const itemMap = {};
items.forEach(item => {
itemMap[item.getAttribute('data-swapy-item')] = item;
});
// Reorder slots based on order array
order.forEach((itemId, index) => {
const slot = slots[index];
if (slot && itemMap[itemId]) {
slot.appendChild(itemMap[itemId]);
}
});
}
// Call the function to set the initial order
setInitialOrder(initialOrder);
// Handle swap event and save the new order
swapy.onSwap((event) => {
console.log(event.data);
const order = event.data.array.map(item => item.itemId); // Changed from item.item to item.itemId
console.log('New Order:', order);
// Send the new order to PHP via AJAX to update the cookie
fetch('save_cookie.php', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ swapyOrder: order })
});
});
</script>
</body>
</html>
Here is the save_cookie.php
<?php
// Retrieve the JSON data from the request
$data = json_decode(file_get_contents('php://input'), true);
// Check if the 'swapyOrder' key is present in the received data
if (isset($data['swapyOrder'])) {
// Update the cookie with the new order
setcookie('swapyOrder', json_encode($data['swapyOrder']), time() + 3600, '/');
}
?>
in short , i created this post to keep this code safe.
Share with your friends:
Drag and Drop with Swapy and PHP
Hello , You might had issues with drag and drop options in your dashboard. here i found a new javascript […]
September 17, 2024
How To Generate A PDF from HTML in Laravel 11
Hello , I was trying to generate a PDF payment receipt for my SAAS application and when i search for […]
June 22, 2024
How to get the next value of an array and loop it in the array in PHP
Do you know How to get the next value of an array and loop it in the array in PHP […]
July 28, 2023
New Open Source CRM for project Management and Invoicing
I’m excited to announce the launch of my new open source project: Gmax CRM. an invoicing and project management tool […]
December 31, 2022
Digital Marketing Toolkit
Get Free Access to Digital Marketing Toolkit. You can use all our tools without any limits
Get Free Access Now