element ui tree组件 draggable 怎么根据接口结果是否成功, 才让拖拽完成?

element ui tree组件 draggable 怎么根据接口结果是否成功, 才让拖拽完成?
element ui tree组件 draggable 怎么根据接口结果是否成功, 才让拖拽完成?

@node-drag-end="handleDragEnd"
@node-drop="handleDrop"
目前element-ui tree控件的拖拽是拖拽后就直接完成了拖拽, 我想在完成之前调接口, 根据接口结果来执行是否完成拖拽 还是 回到原位, 该怎么写?

需求:
例如我想把三级3-2-1, 移动到 二级2-1里的二级2-2后面. 但是我不想位置马上发生变化.
我希望拖拽松开后, 进入loading状态, 调用接口, 根据接口结果
如果接口返回成功, 则被拖拽的元素完成拖拽, 位置发生变化.
如果接口返回失败, 则被拖拽的元素回到原位, 位置没发生变化.

请问下该怎么实现?


回答:

我的 element-ui 经验不是很多,不过大体上可以这样操作:

  1. 假设拖前是 a,增加一个中间状态 b
  2. 拖之后的状态存在 b 里,启动上传,同时锁定列表
  3. 上传成功,把状态保存回 a,恢复拖动
  4. 上传失败,清空中间状态,回到 a,警示用户


回答:

文档里有的:
node-drag-end 拖拽结束时(可能未成功)触发的事件
共四个参数,依次为:被拖拽节点对应的 Node、结束拖拽时最后进入的节点(可能为空)、被拖拽节点的放置位置(before、after、inner)、event

以上是 element ui tree组件 draggable 怎么根据接口结果是否成功, 才让拖拽完成? 的全部内容, 来源链接: utcz.com/p/936662.html

回到顶部