Problem with HTML item positions

Question

Problem with HTML item positions

Navigation

#1 by (-1 votes)

1

I have two pages: In the first one I have the elements in a container that when they are stored in the BD are loaded in the second page.

On the second page, these elements are loaded directly into the body, the problem I have is that the distance relationship on both pages is different or I do not know how to correct it.

I basically use the first page with jQuery UI to make the elements draggable and with .position() I draw their distances in relation to their parent elements (in the first case the div bigger, in the second, the body ).

I know that the .offset() is to get the distance with respect to the document and that .position() is to remove it with respect to the parent element.

Any ideas on how to do it correlative?

Issue # 1:

How do I store the positions of the elements on the first page:

$('#documento').draggable({
    drag: function (event, ui) {
        dragged = true;
        args.documento.top = $(this).position().top + 'px';
        args.documento.left = $(this).position().left + 'px';
    }
});

How to position the positions of the elements on the second page:

#documento { 
    top: {{ number_format($posiciones['documento']['top'], 2) . "px;" }}
    left: {{ number_format($posiciones['documento']['left'], 2) . "px;" }}
}

Issue # 2:

To see in real time what the pages do:

Link to the first page

Link to the second page

You may notice that even if you reload the first page after saving the positions, the positions are loaded "wrongly".

Issue # 4: At the request of @Shaz, I upload the backend code:

With this I save the positions, I use the Laravel framework:

public function guardarPosiciones (Request $request)
{
    $posicion = Posiciones::first();

    if(!isset($posicion->id))
    {
        $posicion = new Posiciones;
    }

    $input = $request->all();

    foreach($input as $k => $v)
    {
        $top = $k . 'Top';
        $left = $k . 'Left';

        $posicion->$top = $v['top'];
        $posicion->$left = $v['left'];
    }

    $posicion->save();
}

And with this one I take the positions:

public function factura ()
{
    $posiciones = \App\Posiciones::first();

    $data['posiciones'] = $posiciones;

    return view('conf.factura', $data);
}

And with the latter, as I mentioned earlier, I assign it to the view:

#documento { 
    top: {{ number_format($posiciones['documento']['top'], 2) . "px;" }}
    left: {{ number_format($posiciones['documento']['left'], 2) . "px;" }}
}

In case it is not understood, the number_float () is to show the value float with two numbers after the comma in the following criteria:

@if ($factura->documento)
    <p class="draggable" id="documento">{!! $factura->documento !!}</p>
    <p class="draggable" id="documento-copia">{!! $factura->documento !!}</p>
@endif

jquery html5 html css3 css

asked by Maramal 27.10.2016 в 20:52

source

1 answer

Hide part of a text with a div Exit the Loop without assigning value

score -1 · Accepted Answer

The error is that on the first page, all p are in position: relative . In contrast, on the second page they are in position: absolute .

When using .position() on p positioned relatively to the parent and each other , the returned coordinates will be different than if the p were absolutely positioned. It is for this reason that when viewing them on the second page they appear in another place

The simple solution:

On the first page, change all p to position: absolute .

The bad thing about doing this is that all the p initially overlap, which will make it cumbersome to find and move the indicated% p . But only the first time.

A slightly more elaborate solution:

Modify the position of the p after being dragged for the first time.

Note: On the first page when you position the p moved, you should not forget to also position them absolute . Otherwise, it seems that they are badly positioned

$('#documento').draggable({
    drag: function (event, ui) {
        dragged = true;
        // Modificas la position tras el primer drag
        $(this).css('position', 'absolute');
        args.documento.top = $(this).position().top + 'px';
        args.documento.left = $(this).position().left + 'px';
    }
});