Tengo dos páginas: En la primera tengo los elementos en un contenedor que al guardarlos en la BD se cargan en la segunda página.
En la segunda página, estos elementos se cargan directamente en el body, el problema que tengo es que la relación de distancia en ambas páginas es distinta o no sé cómo corregirla.
Básicamente uso la primera página con jQuery UI para hacer a los elementos draggable y con .position()
saco sus distancias en relación a sus elementos padre (en el primer caso el div
más grande, en el segundo, el body
).
Sé que el .offset()
es para sacar la distancia con respecto al documento y que .position()
es para sacarla con respecto al elemento padre.
¿Ideas de cómo hacerlo correlativo?
Edición #1:
Como guardo las posiciones de los elementos en la primera página:
$('#documento').draggable({
drag: function (event, ui) {
dragged = true;
args.documento.top = $(this).position().top + 'px';
args.documento.left = $(this).position().left + 'px';
}
});
Como cargo las posiciones de los elementos en la segunda página:
#documento {
top: {{ number_format($posiciones['documento']['top'], 2) . "px;" }}
left: {{ number_format($posiciones['documento']['left'], 2) . "px;" }}
}
Edición #2:
Para ver en tiempo real lo que hacen las páginas:
Pueden notar que incluso si recargan la primera página después de guardar las posiciones, las posiciones se cargan "mal".
Edición #4: A pedido de @Shaz, subo el código backend:
Con éste guardo las posiciones, utilizo el framework Laravel:
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();
}
Y con éste tomo las posiciones:
public function factura ()
{
$posiciones = \App\Posiciones::first();
$data['posiciones'] = $posiciones;
return view('conf.factura', $data);
}
Y con éste último, como mencioné anteriormente, lo asigno en la vista:
#documento {
top: {{ number_format($posiciones['documento']['top'], 2) . "px;" }}
left: {{ number_format($posiciones['documento']['left'], 2) . "px;" }}
}
En caso de que no se entienda, el number_float() es para mostrar el valor float con dos números después de la coma en el siguiente criterio:
@if ($factura->documento)
<p class="draggable" id="documento">{!! $factura->documento !!}</p>
<p class="draggable" id="documento-copia">{!! $factura->documento !!}</p>
@endif
div
en el body?