Interactions
4 methods为元素添加拖放 和重排序行为的交互插件。
theme: { extend: { ... } }使选中元素可被鼠标拖动。支持 handle、axis、containment 和 grid 等选项。
Parameters
| Name | Type | Description |
|---|---|---|
| extend | object | Object that adds/overrides colors, spacing, fonts, etc. without clobbering defaults. |
Returns
config
Example
tailwind
module.exports = {
theme: {
extend: {
colors: { brand: '#ff5722' },
spacing: { '128': '32rem' },
},
},
};content: [...paths]使元素接受可拖动放 置；触发 activate/over/out/drop/deactivate 回调。
Parameters
| Name | Type | Description |
|---|---|---|
| paths | string[] | Glob patterns, e.g. './src/**/*.{html,js}'. |
Returns
config
Example
tailwind
module.exports = {
content: [
'./src/**/*.{html,js,jsx,ts,tsx,vue}',
'./index.html',
],
};darkMode: 'media' | 'class' | 'selector' | [selector]使子列表可通过拖动排序。支持 placeholder、connectWith 和 update 回调。
Parameters
| Name | Type | Description |
|---|---|---|
| darkMode | string | string[] | Strategy: 'media' (default), 'class', 'selector', or a custom selector array. |
Returns
config
Example
tailwind
module.exports = {
darkMode: 'class',
};theme.extend.colors: { ... }在初始化后获取或设置现有交互实例的选项。
Parameters
| Name | Type | Description |
|---|---|---|
| colors | object | Map of color name to color value (or nested shades). |
Returns
config
Example
tailwind
module.exports = {
theme: {
extend: {
colors: {
brand: {
500: '#ff5722',
700: '#c41c00',
},
},
},
},
};