vue-draggable-resizable
vue-draggable-resizable copied to clipboard
How to best combine component with collision logic?
I have an array of 'models' whose position & size data is passed into to my vue-draggable-resizable components as props. I'm attempting to add collision detection that results in resetting the component to its previous position if a drag would result in a collision. On a 'successful' drag I emit an event that results in an update to the model's position data. The difficulty I'm having is that on an 'unsuccessful' drag the model will not change => the props don't change => the watchers in the vue-draggable-resizable component don't trigger => the component won't return to it's original position. My temporary workaround is to change the components position by an imperceptible amount on unsuccessful drags but I wanted to see if there was a cleaner way of handling it/way to force the vue-draggable-resizable component to rerender. Is there any way to 'cancel' a drag mid-drag or at drag-end?
I'm looking to do this as well. Please let me know if you figure it out
@baybars1223 @liquidvisual I modified a version to support collision and adsorption alignment.
The address is https://github.com/gorkys/vue-draggable-resizable-gorkys.
install
npm install vue-draggable-resizable-gorkys
@gorkys Might as well have made the docs in English? :D
@romucci Sorry, my English is very bad. Just added a few properties, I think you can use google translation, I just read the English documentation like this.