使用jquery form.js的Ajax图像

我正在处理这段代码。这里我使用的是jQuery、jQuery form.js和jQueryUI。任务是在上传文件夹中上传图像，并存储图像的路径及其由用户设置的位置（jQueryUI draggable用于此）。它工作得很好。但我不知道它到底是怎么运作的。

有人能向我解释一下我们是如何抓住用户设置的拖动位置的，以及整个过程是如何协同工作的吗。如果你需要看PHP脚本，我也可以分享。感谢

$(document).ready(function () {
    /* Uploading Profile BackGround Image */
    $('body').on('change', '#bgphotoimg', function () {
        $("#bgimageform").ajaxForm({
            target: '#timelineBackground',
            beforeSubmit: function () {},
            success: function () {
                $("#timelineShade").hide();
                $("#bgimageform").hide();
            },
            error: function () {
            }
        }).submit();
    });
    /* Banner position drag */
    $("body").on('mouseover', '.headerimage', function () {
        var y1 = $('#timelineBackground').height();
        var y2 = $('.headerimage').height();
        $(this).draggable({
            scroll: false,
            axis: "y",
            drag: function (event, ui) {
                if (ui.position.top >= 0) {
                    ui.position.top = 0;
                } else if (ui.position.top <= y1 - y2) {
                    ui.position.top = y1 - y2;
                }
            },
            stop: function (event, ui) {}
        });
    });
    /* Bannert Position Save*/
    $("body").on('click', '.bgSave', function () {
        var id = $(this).attr("id");
        var p = $("#timelineBGload").attr("style");
        var Y = p.split("top:");
        var Z = Y[1].split(";");
        var dataString = 'position=' + Z[0];
        $.ajax({
            type: "POST",
            url: "image_saveBG_ajax_bg.php",
            data: dataString,
            cache: false,
            beforeSend: function () {},
            success: function (html) {
                if (html) {
                    $(".bgImage").fadeOut('slow');
                    $(".bgSave").fadeOut('slow');
                    $("#timelineShade").fadeIn("slow");
                    $("#timelineBGload").removeClass("headerimage");
                    $("#timelineBGload").css({
                        'margin-top': html
                    });
                    return false;
                }
            }
        });
        return false;
    });
});