Migrate jQuery to jQuery UI

Question

Below is my full code for my site's drag and drop, that saves positions into mysql This is a couple years old though and I would like to update my jquery to a newer version.

This code uses the older jquery version 1.0.2 and interface.js

I believe to use drag and drop with jquery's newer versions requires the use of jquery UI plugin?

Can someone who understands javascript/jquery help me to get this working with a newer version, when I try using new versions of jquery with it, it will not work

<script type="text/javascript" >
var USER={"ID":"<?php echo $uid; ?>"};

var _x;
var _y;
var _pos;
if(document.all){document.body.onload=b_onload;}
else{document.body.setAttribute("onload","b_onload()");}
function b_onload(){
    $('#columns td.portlet_td').each(function(i){
     $(this).children("br").remove();
    });
    $('#columns td.portlet_td').Sortable(
     {
      accept: 'portlet',
      helperclass: 'sort_placeholder',
      activeclass :  'sortableactive',
      opacity: 0.7,
      tolerance: 'touch',
      handle:'.drag-handler',

      onStop:function(){

       var x = getPos();

       if(!$("#lgif").get(0)){
        $('<i'+'mg id="lgif" src="images/loading.gif" style="display:block;position:absolute;top:500px;left:50%;" />').appendTo('body');
       }

       var __top = (document.body && document.body.scrollTop)?(document.body.scrollTop):((document.documentElement && document.documentElement.scrollTop)? document.documentElement.scrollTop: 0);

       $("#lgif").css({top:__top+'px'});

       $("#lgif").show();
$.getJSON(
    '/processing/ajax/HOMEsaveposition.php',
    {
     uid:(USER.ID),
     position:x
    },
    function(json){
     $("#lgif").hide();
    }
);
      }
     }
    );



};

function getPos(){
    _pos="";
    $('#columns td.portlet_td').each(function(i){
     _x=i;
     $(this).children(".portlet").each(function(j){
      _y=j;
      var index = this.getAttribute("id").split('id')[1] - 100;
      var pos=_x+":"+index;
      _pos+=pos+"|";
     });
    });
    return _pos;
}
</script>

Answer 1

Couple of improvements (I'm sure that's not all but should help you start)

I would just replace that:

if(document.all){document.body.onload=b_onload;}
else{document.body.setAttribute("onload","b_onload()");}

with

$('body').load(b_onload);

Next inside of your b_onload() method you could replace:

$('#columns td.portlet_td').each(function(i){
    $(this).children("br").remove();
});

with

$('#columns td.portlet_td br').remove();

As for the sortable you could use jQuery UI Sortable. It's hard to just tell how exactly should you use it but there's a lot of examples and I'm sure you will find those who will be close to your desired behavior and you can easily adapt them for your app. jQuery UI has quite nice documentation.

Answer 2

The tutorial at NetTuts shows you how to use jQuery UI to build a draggable sortable interface.

You could do a comparison with that one to see where the differences lie.

Take a look here.