即使我重新加载页面，如何将 div 元素放在同一位置并检索 .data() 值

简单的方法是创建每个 div 的属性列表并将其存储在本地存储或其他地方，然后在用户重新加载页面时检索它。

储藏

   function addDraggableBox(
    canvas_id = null,
    id,
    length = null,
    width = null,
    componentValue = null,
    classificationData = null,
    tile_position = null
) {
    let component_value = componentValue || component.children(':selected').text(); // text to be shown for a component inside canvas
    let bg_color = 'grey';
    let txt_color = 'black';
    const component_width = Number(width) || Number(wbox.val());
    const component_length = Number(length) || Number(lbox.val());

    component_value += ` (Area: ${component_width * component_length} sq.m)`; // add area to the component canvas text

    if (classificationData) {
        const { bgColor, txtColor } = classificationData;

        bg_color = bgColor;
        txt_color = txtColor || txt_color;
    }

    var $element = $('<div class="draggablebox" />').text(component_value).css({
        width: component_width * zoom,
        height: component_length * zoom,
        padding: '0.5em',
        'font-size': '1em',
        border: '2px solid',
        'user-select': 'none',
        background: bg_color,
        color: txt_color,
        cursor: 'pointer',
        position: 'absolute',
        block: 'inline',
        top: tile_position ? tile_position.top + 'px' : 0 || 0,
        left: tile_position ? tile_position.left + 'px' : 0 || 0
    });
    $element.attr('id', id);
    $(canvas_id || '#convas').append($element);
    $element.on('mouseup', draggableboxEvent);

    $element.draggable({
        containment: canvas_id || '#convas',
        drag: function(event, ui) {
            const reposition = ui.position;
            const tile_id = event.target.id;
            const floor_id = floor_dropdown.value;

            for (const floor of floor_data) {
                if (Number(floor.id) === Number(floor_id)) {
                    const tile = floor.tiles.find((t) => t.id === tile_id);

                    if (tile) {
                        tile['position'] = reposition;
                    }

                    re_draw(floor_id);
                    break;
                }
            }
        }
    });
    usersitearea += lbox.val() * wbox.val();

    var areacal = usersitearea * 100 / totalsitearea;
    $('#freespace').text(100 - areacal + '%');
} 

取回

   function re_draw(floorId = null) {
    const floor_id = floorId || floor_dropdown.value;
    const site_length = Number(localStorage.getItem('siteLenght')) || 800;
    const site_width = Number(localStorage.getItem('siteWidth')) || 800;
    const zoom = $('#zoomcanvas').val();

    if (is_basement) {
        floor_heading.text('Basement ' + floor_id);
    } else {
        floor_heading.text('Floor ' + (Number(floor_id) - Number(no_of_basements)));
    }

    const cur_floor_data = floor_data.find((floor) => Number(floor.id) === Number(floor_id));

    canvas.empty(); // empty the DOM

    // set height & width of canvas
    canvas.css({ height: site_length * zoom, width: site_width * zoom });

    if (cur_floor_data) {
        cur_floor_data.tiles.forEach((tile) => {
            const component_value = components_data.find((c) => Number(c.id) === Number(tile.componentId)).value;
            const classificationData = components_classification.find(
                (c) => Number(c.id) === Number(tile.classification)
            );
            const tile_position = tile.position || null;

            addDraggableBox(null, tile.id, tile.length, tile.width, component_value, 
        });
    }

    localStorage.setItem('floor_data', JSON.stringify(floor_data));
} ```

make sure you parse the list with JSON parser when you retrieve and JSON stringify when you set the value.