Question

我有一个（大）问题。我想让我的用户可以更改页面上包装器中某些div的位置。目前，我已经有了HTML，CSS和JS的东西。

所以我可以在页面上拖放元素，但是当我重新加载页面时，所有设置都消失了。我已经尝试了很多，但是我找不到一个很好的简单解决方案来保存职位，所以也许您可以帮助我。

这是我要拖放的页面的示例。我在后端使用PHP和一些WordPress功能。

后端部分：

$elements = get_user_meta( get_current_user_id(), 'view_order_element_positions' );

?>

<div id="wrapper">
    <section class="order-details detail-one">
        <div class="section-header">
            <h2 class="title">Title</h2>
            <div class="sort-section-handle" title="Sort"></div>
        </div>
    </section>
    <section class="order-details detail-two">
        <div class="section-header">
            <h2 class="title">Title</h2>
            <div class="sort-section-handle" title="Sort"></div>
        </div>
    </section>
    <section class="order-details detail-three">
        <div class="section-header">
            <h2 class="title">Title</h2>
            <div class="sort-section-handle" title="Sort"></div>
        </div>
    </section>
    <section class="order-details detail-four">
        <div class="section-header">
            <h2 class="title">Title</h2>
            <div class="sort-section-handle" title="Sort"></div>
        </div>
    </section>
</div>

此JS部分：

jQuery(document).ready(function () {
    jQuery("#wrapper").sortable(
        {
            handle: '.sort-section-handle',
            stop: function (event, ui) {
                var a = {action: "update_element_position", el: jQuery(ui.item).attr('class'), pos: ui.item.index()};
                jQuery.post(cm_ajaxurl, a);
            }
        }
    );
});

将位置写入用户meta的AJAX函数：

/**
 * Update position of elements
 */
add_action( 'wp_ajax_update_element_position', 'update_element_position' );
function update_element_position() {

    $element  = $_POST['el'];
    $position = $_POST['pos'];

    add_user_meta( get_current_user_id(), 'view_order_element_positions', array( $element, $position ) );
}

例如，当我将第二个元素移动到第一位置时，此信息将被写入用户元信息：

array(1) { [0]=> array(2) { [0]=> string(45) "order-details detail-two" [1]=> string(1) "0" } }

我的多维数组中的第一个值是元素（类）的名称和新位置。也许有更好的方法，但这是我唯一的想法。

问题：

如何使用结果以正确的顺序显示div？
如何在位置更新过程中检查条目是否存在，以防止同一元素出现重复条目？

感谢您的帮助！

如何在PHP中保存和使用可排序div的位置（拖放）？

0 个答案: