Question

I have a list that uses Jquery UI drag drop sortable but when I drop one of options into a list I want to be able to tell where it is in the list like the following does:

http://www.webresourcesdepot.com/dynamic-dragn-drop-with-jquery-and-php/

Only thing is I am not sure how to do this around my current Jquery and when I tried I failed and it kept giving me [object] [object] errors 🙂

Here is my code:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.15/jquery-ui.min.js" type="text/javascript"></script>
    <script src="js/jquery.ui.core.js"></script>
    <script src="js/jquery.ui.widget.js"></script>
    <script src="js/jquery.ui.mouse.js"></script>
    <script src="js/jquery.ui.sortable.js"></script>
<script type="text/javascript>
$( "#example1, #example2" ).sortable({
stop: function(event, ui) { 
var item = $(ui.item).parent().attr("id"); 
var moveid = $(ui.item).attr("id");
var sortableid = $(ui.item).sortable;
alert(item);
alert(moveid);
}}).disableSelection();
    });
</script>


<div class="box">
<ul id="example1" class='droptrue'>
<li id="id1" class="ui-state-default boxclass">ABC</li>
</ul>
</div>

<div class="box">
<ul id="example2" class='droptrue'>
<li id="id2" class="ui-state-default boxclass">XYZ</li>
</ul>
</div>

If any of you would be able to show me in the right direction of how to do this using javascript or jquery, I would really appreciate it.

Thank you in advance!

Answer 1

Let’s assume our list items have a class of, ‘list_item’.

HTML ->

<ul>
   <li class="list_item" id="some_unique_identifier1"> List Item 197 </li>
   <li class="list_item" id="some_unique_identifier2"> List Item 3 </li>
   <li class="list_item" id="some_unique_identifier3"> List Item 55 </li>
   <li class="list_item" id="some_unique_identifier4"> List Item 104 </li>
   ...etc
</ul>

jQuery Sortable ->

$(function(){
  $('ul').sortable({
    stop: function(event, ui){
      var list_item_id = $(ui.item).prop('id');
      var list_item_position =$(ui.item).parent().children().index(ui.item);

      $.ajax({
        type: 'POST',
        url: '/path/to/my/controller.ext',
        data: { 'id' : list_item_id, 'list_position' : list_item_position}
      });
    }
  }).disableSelection();
});

The PHP Controller will be the most difficult part. You’ll have to (obviously) update the row that we moved, and we’ll have to update all other rows that come after the row with +1, because, well, they’ll all gain 1 index position in the list. creating the proper workflow from here is up to you, but you have the jist of what’s needed from a jQuery Sortable perspective.

As a side note

And in all honesty, I probably wouldn’t send a bunch of $.ajax over to update the table I’m working with. I’d create a temporary table to store all the values, removing items that are submitted more than once so you don’t have duplicates. Then I’d require the user to save the position’s at some point with a submit button (or a per-determined interval). Then I’d update the real table with the values found in the temporary table. I’d also drop the temporary table after we’re done with it.