vue使用dhtmlxgantt 拖拽
时间: 2023-08-11 17:39:42 浏览: 161
如果你想在Vue项目中使用dhtmlxGantt,并且需要实现拖拽功能,可以按照以下步骤进行:
1. 安装dhtmlxGantt依赖:
```bash
npm install dhtmlx-gantt --save
```
2. 在Vue组件中引入dhtmlxGantt:
```javascript
import "dhtmlx-gantt";
import "dhtmlx-gantt/codebase/dhtmlxgantt.css";
```
3. 在Vue组件的mounted钩子函数中初始化dhtmlxGantt:
```javascript
mounted() {
gantt.config.xml_date = "%Y-%m-%d %H:%i";
gantt.init(this.$refs.gantt);
gantt.parse(this.tasks);
}
```
其中,this.$refs.gantt是一个div元素,用于容纳dhtmlxGantt。
4. 配置gantt.config.drag_move和gantt.config.drag_resize事件,实现拖拽功能:
```javascript
gantt.config.drag_move = true;
gantt.config.drag_resize = true;
gantt.attachEvent("onAfterTaskDrag", (id, task) => {
// 拖拽结束后的操作
});
gantt.attachEvent("onAfterTaskResize", (id, task) => {
// 调整大小结束后的操作
});
```
在以上代码中,onAfterTaskDrag和onAfterTaskResize分别是拖拽和调整大小结束后的事件回调函数,你可以在这里实现自己的操作。
通过以上步骤,你就能够在Vue项目中使用dhtmlxGantt并实现拖拽功能了。
阅读全文