Question

我正在创建我的第一个wordpress小部件，我在管理窗口小部件页面中使用jquery ui sortable时遇到问题。

从我在研究中看到的，WordPress已经包含了jquery（和jquery ui库），但为了使用它，我必须使用wp_enqueue_script。

我做了什么。

但只有一些jquery代码有效。 jquery ui sortable不起作用。

这是我的abc_categories_widget.js

jQuery(document).ready(function() {
    // The following doesn't seem to be working
    jQuery("#abc_product_categories_sortable").sortable({
        cursor: 'move'
    });

    // The below statements work as expected
    jQuery('#abc_product_categories_sortable').disableSelection();
    jQuery('#abc_product_categories_sortable li').disableSelection();
});

以下是我的小部件的相关代码

    function form($instance) {
        wp_enqueue_script('abc_categories_widget_js', plugin_dir_url(__FILE__) . 'abc_categories_widget.js', array('jquery','jquery-ui-sortable'), '1.0', true);
        wp_enqueue_style('abc_categories_widget_css', plugin_dir_url(__FILE__) . 'css/jquery-ui-1.8.21.custom.css');

        $abc_categories = $instance['abc_product_categories'];

        global $wpdb;
        $product_categories = $wpdb->get_results('SELECT * FROM ' . $wpdb->prefix . 'abc_categories', ARRAY_A);
?>
        <ul id="abc_product_categories_sortable" class="ui-sortable">
        <?php foreach($product_categories as $a_category) { ?>
            <li id="<?php echo 'cid_' . $a_category['category_id']; ?>" class="ui-state-default" style="padding:5px 10px"><?php echo $a_category['category_name']; ?></li>
        <?php } ?>
        </ul>
<?php
    }
}

任何人都知道可能是什么问题？

Answer 1

我设法通过将<ul>包裹在<div>

来解决我的问题

即。在PHP代码

<div id="abc_product_categories_sortable">
        <ul id="abc_product_categories_sortable_list" class="ui-sortable">
        <?php foreach($product_categories as $a_category) { ?>
            <li id="<?php echo 'cid_' . $a_category['category_id']; ?>" class="ui-state-default" style="padding:5px 10px"><?php echo $a_category['category_name']; ?></li>
        <?php } ?>
        </ul>
<div>

和我的javascript代码

jQuery(document).ready(function() {
    jQuery("#abc_product_categories_sortable ul").sortable({
        cursor: 'move'
    });

    jQuery('#abc_product_categories_sortable ul').disableSelection();
    jQuery('#abc_product_categories_sortable li').disableSelection();
});

jQuery UI Sortable似乎在小部件中的admin中不起作用

1 个答案: