Move list items in multiple lists with jQuery and save to MySQL

Question

I try to change this code to work on multiple lists too and it is also important to drag and drop the items between the lists not only in the same list: link

Here is the code what I made:

   <?php require("db.php"); ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Dynamic Drag'n Drop</title>
<script type="text/javascript" src="//code.jquery.com/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.7.3/jquery-ui.min.js"></script>

<style>
 ul {margin:10px;padding:0;min-height:100px;min-width:100px;background-color:#87FFF5;}
 #sortable1, #sortable2 {
 float: left;
 width: 400px;
 }
 #sortable1 li, #sortable2 li {
 list-style: none;
 margin: 0 0 4px 0;
 padding: 10px;
 background-color:#00CCCC;
 border: #CCCCCC solid 1px;
 color:#fff;
 cursor:move;
 }
 #Result {
 float:none;
 clear:both;
 width: 260px;
 padding:10px;
 }
</style>

<script type="text/javascript">
 $(document).ready(function(){
 $(function() {
 $("#sortable1, #sortable2").sortable({ connectWith: ".connectedSortable", opacity: 0.6, cursor: 'move',
 update: function(event,ui) {
 var order = $(this).sortable("serialize") + '&action=updateRecordsListings' + '&id=' + this.id + '&item='+ui.item[0].innerHTML;
 $.post("updateDB.php", order, function(theResponse){$("#Result").html(theResponse);});
 }
 });
 });
 });
</script>

</head>
<body>
 <div>
 <ul id="sortable1" class="connectedSortable">
 <?php
 $query = "SELECT * FROM records_multiple WHERE list='sortable1' ORDER BY recordListingID ASC";
 $result = mysql_query($query);
 while($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
 ?>
 <li id="recordsArray_<?php echo $row['recordID']; ?>"><?php echo $row['recordID'] . ". " . $row['recordText']; ?></li>
 <?php } ?>
 </ul>

 <ul id="sortable2" class="connectedSortable">
 <?php
 $query = "SELECT * FROM records_multiple WHERE list='sortable2' ORDER BY recordListingID ASC";
 $result = mysql_query($query);
 while($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
 ?>
 <li id="recordsArray_<?php echo $row['recordID']; ?>"><?php echo $row['recordID'] . ". " . $row['recordText']; ?></li>
 <?php } ?>
 </ul>
 </div>

 <div id="Result"></div>
</body>
</html>

The drag and drop function is working now great but I have problems to save the result to the MySQL database. If I have more than one list I have to know the name of the new list where the item was dropped and the ID of the moved item. So I can save only that list and I can also change the list ID of the moved item.

If I use update: function(event,ui) the name of the list is not always correct. If I change it to receive: function(event,ui), it is correct, but calls the PHP file only if I move the item in an other list. So how could I get back in any cases the name of the list where the item was moved or droped?

score 0 · Accepted Answer · edited May 23 '17 at 12:31

0

Maybe you can use the change( event, ui )Type: sortchange

This event is triggered during sorting, but only when the DOM position has changed. http://api.jqueryui.com/sortable/#event-change

or if that didn't work, here is the complete list of options. http://api.jqueryui.com/sortable/

UPDATE see this post. jquery Sortable connectWith calls the update method twice ... it is getting called twice you add the if statement and use update.

update: function(e,ui) { if (this === ui.item.parent()[0]) { //your code here } }

edited May 23 '17 at 12:31

Community

1
1

answered Mar 03 '15 at 14:51

user021205

74
1
7

Thank you. I tried all already but non of them was working fine. But maybe this is not the best way what I try to get the name of the list where the item was droped. With change I also get sometimes the wrong list name when I move the item between the lists. – Mandino Mar 03 '15 at 15:07
http://stackoverflow.com/questions/3492828/jquery-sortable-connectwith-calls-the-update-method-twice, see thats the problem, to solved it just add that if: update: function(e,ui) { if (this === ui.item.parent()[0]) { var order = $(this).sortable("serialize") + '&action=updateRecordsListings' + '&id=' + this.id + '&item='+ui.item[0].innerHTML; $.post("updateDB.php", order, function(theResponse){$("#Result").html(theResponse);}); } } – user021205 Mar 03 '15 at 15:46

Move list items in multiple lists with jQuery and save to MySQL

1 Answers1