PythonHelp
Reputation: 31
How to drag and drop MYSQL records?
I know that this is probably not the right way to do this, but I this is what I have so far (I'm new to jQuery).
I have each DIV generated inside the loop depending on the number of MYSQL records. Each div echo's the record. I need each DIV to call the draggable j Query function so that it can sit on one of the cells in the table.
The issue is that I am trying to get each div to become movable using the draggable function, I'm not sure how to reuse the handler for each Div.
<!doctype html>
<html lang="en">
<head>
<meta content="en-us" http-equiv="Content-Language">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Draggable - Default functionality</title>
<link rel="stylesheet" href="/../../../../../../../../code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
#draggable { width: 150px; height: 150px; padding: 0.5em; }
.auto-style3 {
text-align: center;
}
</style>
<script src="../jquery-3.6.0.js"></script>
<script src="../jquery-ui.js"></script>
<script>
$( function() {
$( "#draggable" ).draggable();
} );
</script>
<script>
$( function() {
$( "#draggable1" ).draggable();
} );
</script>
<script>
$( function() {
$( "#draggable2" ).draggable();
} );
</script>
<script>
$( function() {
$( "#draggable3" ).draggable();
} );
</script>
<script>
$( function() {
$( "#draggable4" ).draggable();
} );
</script>
<script>
$( function() {
$( "#draggable5" ).draggable();
} );
</script>
<script>
$( function() {
$( "#draggable6" ).draggable();
} );
</script>
<script>
$( function() {
$( "#draggable7" ).draggable();
} );
</script>
<script>
$( function() {
$( "#draggable8" ).draggable();
} );
</script>
<script>
$( function() {
$( "#draggable9" ).draggable();
} );
</script>
<script>
$( function() {
$( "#draggable10" ).draggable();
} );
</script>
<script>
$( function() {
$( "#draggable11" ).draggable();
} );
</script>
<script>
$( function() {
$( "#draggable12" ).draggable();
} );
</script>
<script>
$( function() {
$( "#draggable13" ).draggable();
} );
</script>
<script>
$( function() {
$( "#draggable14" ).draggable();
} );
</script>
<script>
$( function() {
$( "#draggable15" ).draggable();
} );
</script>
<script>
$( function() {
$( "#draggable16" ).draggable();
} );
</script>
<script>
$( function() {
$( "#draggable17" ).draggable();
} );
</script>
<script>
$( function() {
$( "#draggable18" ).draggable();
} );
</script>
<script>
$( function() {
$( "#draggable19" ).draggable();
} );
</script>
<script>
$( function() {
$( "#draggable20" ).draggable();
} );
</script>
<script>
$( function() {
$( "#draggable21" ).draggable();
} );
</script>
<script>
$( function() {
$( "#draggable22" ).draggable();
} );
</script>
<script>
$( function() {
$( "#draggable23" ).draggable();
} );
</script>
<script>
$( function() {
$( "#draggable24" ).draggable();
} );
</script>
<script>
$( function() {
$( "#draggable25" ).draggable();
} );
</script>
<script>
$( function() {
$( "#draggable26" ).draggable();
} );
</script>
<script>
$( function() {
$( "#draggable27" ).draggable();
} );
</script>
<script>
$( function() {
$( "#draggable28" ).draggable();
} );
</script>
<script>
$( function() {
$( "#draggable29" ).draggable();
} );
</script>
<script>
$( function() {
$( "#draggable30" ).draggable();
} );
</script>
<script>
$( function() {
$( "#draggable31" ).draggable();
} );
</script>
<script>
$( function() {
$( "#draggable32" ).draggable();
} );
</script>
</head>
<body>
<h1 class="auto-style3"><br>Seating Planner</h1>
<table align="center" style="width: 676px; height: 406px">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<div id="draggable" class="ui-widget-content" style="width: 150px; height: 51px">
<p> The MYSQL row will be echoed here </p>
</div>
</body>
</html>Upvotes: 1
Views: 215
Answers (1)
Lee Taylor
Reputation: 7994
OK, you had a few things that were wrong.
- You don't need to create a script tag for each bit of code you write.
- You don't need a ready handler (
'$(function() {) for everything you do.
These first two don't cause any problems, but they are unnecessary.
You were under the assumption that you needed to give an id to each
divthat you wanted to bedraggable. This is not the case, use classes instead. Seemydraggable.I assume that you want to be able to move those divs to a specific area (those tds, probably), and to prevent overlap. That's another question that you should ask separately.
$(function() {
$(".mydraggable").draggable();
});.mydraggable {
width: 150px;
height: 51px;
padding: 0.5em;
text-align: center;
background: #e59959;
cursor: pointer;
}
.auto-style3 {
text-align: center;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.min.js" integrity="sha256-eTyxS0rkjpLEo16uXTS0uVCS4815lc40K2iVpWDvdSY=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
<h1 class="auto-style3"><br>Seating Planner</h1>
<table align="center" style="width: 676px; height: 406px">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<div class="mydraggable" class="ui-widget-content">
<p> #1 The MYSQL row will be echoed here </p>
</div>
<div class="mydraggable" class="ui-widget-content">
<p> #2 The MYSQL row will be echoed here </p>
</div>
<div class="mydraggable" class="ui-widget-content">
<p> #3 The MYSQL row will be echoed here </p>
</div>
<div class="mydraggable" class="ui-widget-content">
<p> #4 The MYSQL row will be echoed here </p>
</div>Upvotes: 1
Related Questions
- Jquery, drag and drop and save to mysql database?
- How to update database after drag and drop using javascript/ajax?
- jQuery Drag and Drop - Save positions into MysQL Database
- JQuery Drag and Drop from two tables
- jQuery + PHP + MySQL: Drag 'n' Drop with 2 tables
- Sending and deleting records to database with a drag and drop table
- MySQL Item Database with JQuery Droppable
- Drag, Drop, Swap, Mysql
- Drag and Drop jQuery Save Position to mysql database
- Drag and drop and insert into MySQL