Draggable 和 droppable 在 wordpress 管理中不起作用

Question

在我的 wordpress metabox 中，我正在创建拖放和可排序的 metabox 字段。

加载在 admin 中加载的 jquery UI（完整稳定版本）。

function load_custom_wp_js() {

wp_register_script( 'jQuery_Ui', get_template_directory_uri() . '/js/jquery-ui.js');
wp_enqueue_style( 'jQuery_Ui' );

}
add_action( 'admin_enqueue_scripts', 'load_custom_wp_js' );

相对 CSS：

 ul#content-box{
     position:relative;width:100%;height:auto;padding:20px 0px;background:#C7C7C7;
    }

    ul#content-box li.field{
     float:left;width:20%;height:50px;border:2px solid #787878;border-radius:2px;margin:3px 19px;background:#909090
    }

查询：

<script type="text/javascript">
jQuery(document).ready(function(){

  jQuery( "ul#contnet-box" ).sortable({
            });
      });

</script>

以上 Sortable 对我来说工作正常，但对于以下可拖动功能

jQuery( init );

function init() {
  $('ul#content-box').draggable();
}

抛出错误 TypeError: jQuery(...).draggable is not a function。droppable 也是同样的错误。sortable 工作正常，但可拖动和可放置的问题。任何人都可以帮助我解决实际问题。wordpress 管理中是否有任何冲突？

Answer 1

我在开发插件时遇到了同样的问题。我用谷歌搜索了好几个小时，最后创建了这个解决方案：

将此代码复制到插件的主 php 文件中（注意函数的名称，它也在 add_action 部分）。

function add_custom_jquery_ui() {
   wp_enqueue_script( 'jquery-ui-draggable' );
   wp_enqueue_script( 'jquery-ui-droppable' );
}
add_action( 'admin_enqueue_scripts', 'add_custom_jquery_ui' );

它启用来自被拒绝的命名句柄。当然，您/其他人可以从https://developer.wordpress.org/reference/functions/wp_register_script/命名函数中的其他 jQuery UI 句柄