Question

Related: How do I run different versions of jQuery on the same page?

---

I have a pages that uses a lot of jquery, I have a drag and drop that saves position into mysql DB also.
My jquery file is about 2 years old and today I tried to use a newer version because there is a script I am wanting to use but it only works with newer version within the past year of jquery.

After I put in the newer version of jquery, my drag and drop does not work, everything else work on my page except my drag and drop code. It partially works.

My page has 2 columns and you can drag items across the 2 colums but now it only drags on the left column and items in the right colum will not move.

Items in the left column that do move will not find a place to drop to so on release the item is lost. The ajax portion of my code is still working because when I “lose” an item it update the DB and that items ID number will be missing from my list of items on that page.

How can I get older jquery code to work?

Here is my code

<script>
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(
    '/member/beta/saveposition.php',
    {
        uid:(USER.ID),
        position:x
    },
    function(json){
        $("#lgif").hide();
    }
);
            }
        }
    );



};
function resetPos(){
    $.getJSON(
        '/member/beta/saveposition.php',
        {
            uid:(USER.ID),
            position:"0:0|0:1|0:2|0:3|0:4|0:5|0:6|1:7|1:8|1:9|1:10|1:11|1:12|1:13|1:14|1:15|1:16|"
        },
        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>

Please also note that my jquery version that works correctly requires another file called interface, this interface file does not work with the new jquery version so maybe the new jquery needs something else added for drag and drop to work?

Answer 1

Since you never said what version of JQuery you were using when that was made, we have no point of reference to see how much has actually changed since then. Your best bet is to just rewrite it, a very long list of changes have occurred since any old version of JQuery.