Ajax изображение с использованием jquery form.js

Я работаю с этим фрагментом кода. Здесь я использую 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;
});
});