Ajax 图片使用 jquery form.js

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 post 到 PHP 脚本之前获取位置，它粗略地从 'top' CSS 获取属性#timelineBGload 元素上的内联样式。

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

Ajax 图片使用 jquery form.js

Ajax image using jquery form.js

php

jquery

ajax

jquery-ui

jquery-plugins