在Wordpress中启用拖放脚本

注意:此代码是在考虑WordPress 2.8的情况下编写的。它不适用于2.6之前的版本,并且在更高版本中可能会产生无法预测的结果。

拖放是一种有用的处理机制,可以将一组复杂的按钮或下拉列表变成一个简单而优雅的解决方案。

WordPress内置了许多脚本,这些脚本可以执行许多有用的功能。但是,默认情况下未启用它们,这意味着要使脚本正常工作,您需要启用它们。

WordPressa中的拖放功能由Scriptaculous框架提供。要使Wordpress将此包含在页面标题中,只需将函数wp_enqueue_script()与参数“ scriptaculous-dragdrop”一起使用。

wp_enqueue_script("scriptaculous-dragdrop");

我从函数内部运行此代码的成功有限,因此,最好的选择是将其添加到插件文件的底部,而不是任何函数的范围。

如果只想在admin部分中启用它们,请将此函数调用包含在if语句中,该语句使用该is_admin()函数查看该脚本是否正在admin部分中运行。

if ( is_admin() ) {
  wp_enqueue_script("scriptaculous-dragdrop");
}

现在,您可以创建可排序的列表。

<div id="container_sortable">
<div id="item_1">Item 1</div>
<div id="item_2">Item 2</div>
<div id="item_3">Item 3</div>
</div>

并添加JavaScript以使其正常运行。以下代码将上述元素转换为可排序的列表。

Position.includeScrollOffsets = true;
Sortable.create('container_sortable',{
    tag: 'div',
    scroll: window,
    onChange: doSomething
});
 
function doSomething(){
  // 在这里更改代码
}

请注意,像“ item_1”中一样的“ item_itemNumber”的id格式对于获得可排序的类函数(如sequence()工作)很重要。如果项目不是这种格式,则sequence()该项目将返回null。

Position.includeScrollOffsets = true; 是在调用之前添加的,以使窗口滚动正常工作。如果列表很大,并且希望将拖动到窗口顶部的项目向上滚动,请使用此选项和选项“ scroll:window”创建与浏览器兼容的滚动窗口机制。Sortable.create()

有关可以包括的脚本种类的完整列表,请参见wp_enqueue_script上Wordpress页面的底部。