holiber / sl-vue-tree

Customizable draggable tree component for Vue.js
MIT License
344 stars 79 forks source link

Terminate dragging without a drop #26

Closed lazylester closed 5 years ago

lazylester commented 5 years ago

In using sl-vue-tree in my app, I have concluded that it's sometimes necessary to terminate dragging without dropping the draggingNodes anywhere. Sometimes I have inadvertently found dragging to be triggered and there's currently no way to terminate it. In another scenario, I initiate dragging but then change my mind, and I would just like to revert to the pre-dragging hierarchy.

I would happily submit a PR for this, but would like to understand if

  1. you agree that it's desirable
  2. you have a preference as to how it should be done, options I can think of (you may have other ideas too) include: a) hit the keyboard escape key b) drop the dragging nodes left or right of the bounding box c.) drop the dragging nodes above or below the bounding box, sufficiently far removed that it's not interpreted as a drop 'before' the first node or 'after' the last node.
holiber commented 5 years ago

Hi. That's a good proposal. I like the idea to have an ESC key to cancel the dragging by default. However, the key should be customizable. The closest PR for adding a new key handler is https://github.com/holiber/sl-vue-tree/pull/13 . Other options are good too, but not for the default behavior.

PayteR commented 5 years ago

Hi, i need this feature, because i want to show confirmation window, where user can cancel dragged item and return it back to previous position. I have idea how to do it, but i can't figure out, how to change path for item, this:

Vue.set(nodeModel, 'path', [9])
slVueTree.updateNode(node.path, { path: [9] })

not work, how can i change path? thx

holiber commented 5 years ago

@PayteR if you want to rollback last dragging try to check out the solution here https://github.com/holiber/sl-vue-tree/issues/12