Перенос jQuery в пользовательский интерфейс jQuery

Question

Ниже приведен мой полный код для перетаскивания моего сайта, который сохраняет позиции в MySQL Это пара лет, и я хотел бы обновить свой jquery до более новой версии.

Этот код использует более старую версию jquery 1.0.2 и interface.js

Я полагаю, что для использования перетаскивания с более новыми версиями jquery необходимо использовать плагин пользовательского интерфейса jquery?

Может ли кто-то, кто понимает javascript / jquery, помочь мне заставить это работать с более новой версией, когда я пытаюсь использовать новые версии jquery с ним, это не будет работать

<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

В руководстве NetTuts показано, как использовать пользовательский интерфейс jQuery для создания перетаскиваемого сортируемого интерфейса.

Вы могли бы сделать сравнение с этим, чтобы увидеть, где лежат различия.

Взгляните здесь .

Answer 2

Пара улучшений (я уверен, что это еще не все, но они должны помочь вам начать)

Я бы просто заменил это:

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

с

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

Далее внутри вашего метода b_onload () вы можете заменить:

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

с

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

Что касается сортировки, вы можете использовать jQuery UI Sortable . Трудно просто сказать, как именно вы должны его использовать, но примеров много, и я уверен, что вы найдете тех, кто будет близок к вашему желаемому поведению, и вы легко сможете адаптировать их для своего приложения. Пользовательский интерфейс jQuery имеет довольно хорошую документацию.