Question

我正在使用这段代码。这里我使用的是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;
    });
});

Answer 1

$("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发布到PHP脚本之前的位置，它正在粗略地从#timelineBGload元素的内联样式获得'顶级'CSS属性。

如果在拖动#timelineBGload时检查DOM，UIDraggable会在移动时更新顶部（和左侧）

使用jquery form.js的Ajax图像

1 个答案: