Drag and Drop Items

[bravo14]

Hi

 

I am trying to create a draggable list of items, the code is below

 

Jquery set up

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
         <link href="style/admin.css" rel="stylesheet" type="text/css"/>
  <link rel="stylesheet" href="css/validationEngine.jquery.css" type="text/css"/>
        <link rel="stylesheet" href="css/template.css" type="text/css"/>
        <script src="js/jquery-1.6.min.js" type="text/javascript">
        </script>
          <script src="js/jquery-ui-1.8.16.custom.min.js"></script>
        <script src="js/languages/jquery.validationEngine-en.js" type="text/javascript" charset="utf-8">
        </script>
        <script src="js/jquery.validationEngine.js" type="text/javascript" charset="utf-8">
        </script>
        <script src="js/contrib/other-validations.js" type="text/javascript" charset="utf-8">
        </script>
        <link rel="stylesheet" href="style/jquery.ui.all.css">
	<script src="js/jquery.ui.core.js"></script>
	<script src="js/jquery.ui.widget.js"></script>
	<script src="js/jquery.ui.datepicker.js"></script>
        <script src="js/jquery.ui.accordion.js"></script>
        <script src="js/jquery.ui.sortable.js"></script>
  <script>
  $(document).ready(function() {
    $("#accordion").accordion();
  });
  </script>
<script> 
$(document).ready(
function() {
$("#sortme").sortable({
update : function () {
serial = $('#sortme').sortable('serialize');
$.ajax({
url: "sort-events.php",
type: "post",
data: serial,
error: function(){
alert("theres an error with AJAX");
}
});
}
});
}
);
</script>

 

List of items

<ul id="sortme">
<li id="menu_16">31st March - Steam train starts operating from Paignton to Dartmouth</li>
<li id="menu_15">31st March - 15th April - Easter Fun Fair Paignton</li>
<li id="menu_14">24th - 25th March Half price steam train rides on the Buckfastleigh/Totnes Line</li>
<li id="menu_17">6th - 8th April - Paignton Rugby Club Beer Festival</li>
</ul>

 

When I go to the page, the items are not sortable/draggable

 

What have I done wrong?

[Adam]

Can't see anything wrong with the sortable() call, except for indentation. Replace it with this:

 

$(document).ready(function() {
    $("#sortme").sortable({
        update: function () {
            serial = $('#sortme').sortable('serialize');
            $.ajax({
                url: "sort-events.php",
                type: "post",
                data: serial,
                error: function() {
                    alert("theres an error with AJAX");
                }
            });
        }
    });
});

 

It's the exact same code, just indented properly to make reading easy. It can put people off replying if they see unindented code, and maintaining it is a nightmare for your self.

 

It's hard to say where the problem is, and jQuery is a bit of a bugger when it comes to hiding errors. Are there any syntax errors reported? Do all the scripts exists at the paths you're expecting? Is there any HTML syntax errors that could mean jQuery is unable to find the UL?

 

You have jQuery itself included twice by the way, though that shouldn't actually cause any problems, there's just no need. You could also combine a lot of the UI wigets into one file to save some HTTP requests.