0
141
VistasAgregar tabla con posición no muestra exactamente dónde estaba
Estoy desarrollando un sitio web con Jquery-ui arrastrables. En el "contenedor" del bloque div principal hay muchos elementos secundarios que se pueden arrastrar, lo que permite al usuario moverse libremente por el bloque div.
<div class="container"> <div class="draggable ui-widget-content" id="1">Table 1</div> <div class="draggable ui-widget-content" id="1">Table 2</div> ... </div>Implementé una función de guardado que guarda la posición de cada bloque div como una cadena json. Almacena la posición de los arrastrables y sus ID. Por lo tanto, se puede cargar con el lugar donde estaban la última vez.
[{"id":"1","izquierda":"256","arriba":"226"},{"id":"2","izquierda":"256","arriba":"632 "},{"id":"3","izquierda":"1330","arriba":"226"},{"id":"4","izquierda":"1330","arriba": "632"},{"id":"5","izquierda":"818","arriba":"417"}]
Aquí está el problema:
Cargué los datos de json. Resulta que toda la posición está mal.
Recreé usando JSFiddle para solucionar el problema: https://jsfiddle.net/braveminds1823/wcmxL2bj/3/
Antes de guardar 
Después de guardar, cargando la posición desde json 
Editar: Sé que establecer la posición en obras absolutas, pero dado que mi sitio web responde. Los arrastrables saldrán del contenedor y cubrirán el contenido web.
1 Respuestas
Responde la pregunta0
Puede ver por lo que proporcionó en la pregunta (no solo el violín) que sus valores almacenados no son correctos.
Mirando solo "tabla": cuando carga, es 20x20, pero cuando lo mueve más hacia la izquierda y hacia arriba, ahora es 256x226, por lo que claramente no se guarda correctamente.
Su problema es con su uso de la position
Desde la posición de MDN:
relativeEl elemento se coloca de acuerdo con el flujo normal del documento,
y luego compensado con respecto a sí mismo
por lo que los cuadrados interiores no quieren position:relative , quieren position:absolute
absoluteEl elemento se elimina del flujo de documentos normal y no se crea ningún espacio para el elemento en el diseño de página. Está posicionado en relación con su antepasado posicionado más cercano .
Así que dos pequeños cambios, en el css:
.draggable { position:absolute; } #containment-wrapper { position:relative; }para que los elementos que se pueden arrastrar se coloquen de forma absoluta, en relación con el contenedor principal.
De lo contrario, su código funciona bien.
Violín actualizado: https://jsfiddle.net/hrfx9sky/1/