动态添加元数据盒并使用拖放对它们进行排序 - Wordpress

Question

修改

在wordpress中开发一个功能以显示排名，例如FIFA.com排名@ Fifa Ranking

到目前为止，这是我取得的成就LINK TO IMAGE

我可以通过点击“添加更多”来动态生成这些行。按钮，我也可以使用jQuery删除任何特定的行。

这是我的jQuery

<script>
        var $ =jQuery.noConflict();
            $(document).ready(function() {
            var count = <?php echo $c - 1; ?>;
            $(".add").click(function() {
                count = count + 1;
                $('tbody').append('<tr class="sp-row sp-post alternate"><td><label for="sp_leagues_0_0"><span class="remove">Remove</span></label></td><td><input type="text" name="twbtdgs[' + count + '][rank]" value="" placeholder="-"></td><td><input type="text" name="twbtdgs[' + count + '][player]" value="" placeholder="-"></td><td><input type="text" name="twbtdgs[' + count + '][club]" value="" placeholder="-"></td><td><input type="text" name="twbtdgs[' + count + '][points]" value="" placeholder="-"></td><td><input type="text" name="twbtdgs[' + count + '][prev-points]" value="" placeholder="-"></td><td><input type="text" name="twbtdgs[' + count + '][position]" value="" placeholder="-"></td></tr>');
                return false;
            });
            $(".remove").live('click', function() {
                $(this).closest("tr").remove();
            });
        });
    </script>

我可以成功地将这些数据保存在数组中并可以将其取回。

问题

我无法使用jQuery UI Sortable（内置），这项工作的主要目的是根据新的排序顺序对行进行排序并更改排名，这种排序应该更新一旦我更新我的帖子。

我可以向你们展示这个过程的全部过程，帮助我根据需要添加这个可排序的jquery。

Answer 1

这是它的最终外观

将自定义js文件挂钩到管理区域

function my_enqueue($hook) 
{
    if ( 'post.php' != $hook ) {
        return;
        }
    wp_enqueue_script( 'custom', get_template_directory_uri() . '/assets/js/admin/custom.js' ,array(), '4', true );
}
    add_action( 'admin_enqueue_scripts', 'my_enqueue' );

最后将此脚本添加到其中

$('#ranking_info_id tbody').sortable({
        opacity: 0.7,
        revert: true,
        cursor: 'move',
        handle: '.sort'
    });

句柄＆＃39; .sort＆＃39; 在结束</tr>之前的最后添加，例如<td><a class="sort">|||</a></td>

从数组中存储事物的方式包括新的排序顺序如下：

add_action('save_post', 'save_details');

function save_details($post_id){
global $post;

    if ( defined('DOING_AUTOSAVE') && DOING_AUTOSAVE )
    return $post_id;
    if (isset($_POST['twbtdgs'])){
        $data = $_POST['twbtdgs'];
        update_post_meta($post_id,'twbtdgs',$data);
    }else{
        delete_post_meta($post_id,'twbtdgs');
    }
}