drag between list & save order

May 9, 2010 at 2:17 PM

first of all, thank you for this amazing script! it works smoothly

there is one thing though i would like to ask
on one page of my site, i've got three areas where there is a list (with pics inside). I can drag smoothly between them, but I don't have a clue how to write the new order into my database

I've found it how to do it when there's only 1 list on the page, but I would like the database to remember the pic is in list2 and not list1

How can I do that?

Thx in advance

Coordinator
May 10, 2010 at 7:59 AM

Does something like this help?

<ul id="list1">
  <li itemID="15"><img /></li>
  ...
</ul>
<input type="hidden" name="list1sort" />

<ul id="list2">
  <li itemID="41"><img/></li>
  ...
</ul>
<input type="hidden" name="list2sort" />

<script type="text/javascript">
  $("#list1, #list2").dragsort({ dragBetween: true, dragEnd: saveOrder });
  function saveOrder() {
    var data = new Array();
    $("#list1 li").each(function(i) { data[i] = $(this).attr("itemID"); });
    $("[name=list1sort]").val(data.join("|"));

    data = new Array();
    $("#list2 li).each(function(i) { data[i] = $(this).attr("itemID"); });
    $("[name=list2sort]").val(data.join("|"));
  }
</script>

If you're wanting server code example I need to know what language you use.

May 10, 2010 at 10:37 AM

right, sorry :)

i use php & mysql

the thing i'd like to know is how you can put in your database in what list the items are

your solution is that the new order is saved in list1sort and list2sort, and then in different fields in the database?

 

 

Coordinator
May 12, 2010 at 8:12 AM

That's right so for example if the lists represented categories then in the database for pictures I'd have a column called category that I would set during the update statement like so:

$ids = explode("|", $_POST["list1sort"]);
for ($idx = 0; $idx < count($ids); $idx+=1) {
  $id = $ids[$idx];
  $ordinal = $idx;
  mysql_query("update pictures set ordinal = " . $idx . ", category = 'people' where id = " . (int)$ids[$idx]);
}

$ids = explode("|", $_POST["list2sort"]);
for ($idx = 0; $idx < count($ids); $idx+=1) {
  $id = $ids[$idx];
  $ordinal = $idx;
  mysql_query("update pictures set ordinal = " . $idx . ", category = 'scenary' where id = " . (int)$ids[$idx]);
}

Then when it comes to binding back to the page it's a simple matter of going:

$query = mysql_query ("select * from pictures where category = 'people' order by ordinal");
$row = mysql_fetch_assoc ($query);
...

Does this help?