Отправить координаты динамически нарисованного поля через AJAX - PullRequest
Новая
       17

Отправить координаты динамически нарисованного поля через AJAX

1 голос
/ 05 марта 2019

Я снимаю изображение, сохраняю координаты первого клика, рисую прямоугольник, основанный на них, затем сохраняю окончательные координаты. Я попытался вывести координаты, используя console.log(), и он отслеживает правильные координаты. Проблема в том, что он НЕ ПОСТАВЛЯЕТ его правильно. 

$(document).ready(function () {
    var $selection = $('<div>').addClass('selection-box');
    var firstClick = true;
    $('#image')
    .data("vals", {xstart: 0, ystart:0})
    .on('dragstart', function(e) { event.preventDefault(); })
    .mousedown(function(e) {
        var xval = Number(e.pageX - $(this).offset().left);
        var yval = Number(e.pageY - $(this).offset().top);
        console.log(xval)
        $("#image").data("vals").xstart = e.pageX - $(this).offset().left;
        $("#image").data("vals").ystart = e.pageY - $(this).offset().top;
        $selection.css({
            'top': yval,
            'left': xval,
            'width': 0,
            'height': 0
        });
        $selection.appendTo($('#image'));
        $('#image').mousemove(function(e) {
            var move_x = e.pageX - $(this).offset().left,
                move_y = e.pageY - $(this).offset().top,
                width  = Math.abs(move_x - xval),
                height = Math.abs(move_y - yval),
                new_x, new_y;
            console.log(xval)

            new_x = (move_x < xval) ? (xval - width) : xval;
            new_y = (move_y < yval) ? (yval - height) : yval;    
            $selection.css({
                'width': width,
                'height': height,
                'top': new_y,
                'left': new_x
            });
        }).mouseup(function(e) {
            xend = Number(e.pageX - $(this).offset().left);
            yend= Number(e.pageY - $(this).offset().top);
            //console.log(xval, yval, xend, yend);
            $.ajax({
                 url: '/view/getwords/',
                 type:"POST",
                 data: {
                     xval: xval.toString(),
                     yval: yval.toString(),
                     xend: xend.toString(),
                     yend: yend.toString(),
                 },
                 dataType: 'json',
                 success: function (data) {
                    console.log(xval, yval, xend, yend);
                 },
                 error:function(){
                     alert("Error");
                 }
             });
            $('#image').off('mousemove')
            $selection.remove();
        })
    })
});

P.S. Это один из моих первых вопросов о StackOverflow, поэтому дайте мне знать, если я смогу лучше задавать вопросы.

Спасибо!

Редактировать: Вот фрагмент кода, который я использовал. http://jsbin.com/ireqix/226/edit?html,js,output По сути, я просто пытаюсь отправить координаты из приведенного выше фрагмента.

...