vue-draggable-resizable icon indicating copy to clipboard operation
vue-draggable-resizable copied to clipboard

How to best combine component with collision logic?

Open baybars1223 opened this issue 6 years ago • 4 comments

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?

baybars1223 avatar Jan 30 '19 16:01 baybars1223

I'm looking to do this as well. Please let me know if you figure it out

liquidvisual avatar Feb 18 '19 01:02 liquidvisual

@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 avatar Jul 12 '19 12:07 gorkys

@gorkys Might as well have made the docs in English? :D

romucci avatar Sep 21 '19 17:09 romucci

@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.

gorkys avatar Sep 23 '19 01:09 gorkys