Dose it support scale and grid scene?

@nikitasnv

When I build a project (using Vite), it breaks because of:

[commonjs] Unexpected token (1:7147) in .../node_modules/vue-resizable/dist/vue-resizable.umd.min.js

I notice that on previous versions, there was no such file, and the dist file was just main.js, and this problem did not occur.

Hi, I'm having trouble getting the initial with right when I start dragging:

Here's a demo with the latest version of the library:

https://codesandbox.io/s/vue-template-forked-88o3g?file=/src/App.vue

When you try to drag the div from the right, the width received by the resize:start handler is the full width of the parent, instead of its own width.

I wanted to let this suggestion use Web API Animation responsible was to make the transformation of the possession of the elements.
https://developer.mozilla.org/en-US/docs/Web/API/Animation
https://developer.mozilla.org/en-US/docs/Web/API/Animation/replaceState#Examples

In a Loop, I'm using multiple VueResizable components. if I drop one component to another component I want to get the both component info. How can I do that?

I am not able to create two windows, when the windows seem to be moving together.
would there be any way to solve this ?

@nikitasnv I am trying to use this component for a dashboard, but my present needs require me to use width in percentages. Is it possible to do this? The following is how I tried creating a component but the issue arises when I try setting a certain width in percentage by selecting the value from the dropdown.

<template>
  <vue-resizable 
    :min-width="320"
    :width="containerWidth + '%'" 
    :active="['r']"
    
  >
    <div class="resizable-content">
      <pre>{{ containerWidth }}</pre>

      <select v-model="containerWidth">
        <option :value="75">75%</option>
        <option :value="50">50%</option>
      </select>

      <slot></slot>
    </div>
  </vue-resizable>
</template>

<script>
import VueResizable from 'vue-resizable'

export default ({
  name: 'resizeableContainer',
  components: {VueResizable},
  props: ['width'],
  data () {
    return {
      containerWidth: this.width
    }
  }
})
</script>

<style scoped>
  .resizable-content {
    width: 100%;
    height: 100%;
    background-color: aqua;
  }
</style>

How can I dynamically add to a template? Please help to understand

When i'm only activating 'r' I would expect that only the width of an html element would change.
But the left, top and height are also set.
I've even tried this:

<vue-resizable class="folders-wrapper d-flex" :width="300" :active="['r']" fit-parent :max-width="500" :min-width="100" :disable-attributes="['l', 't', 'h']">

But then the attributes are changed as wel.

The downside of this is that i can't set an element to have a height: auto

Hi! Would you be open to adding an option to resizing the element to the size of its parent when handlingUp?
Something like:

if (this.resizeToParentSize) this.w = this.$el.parentElement.clientWidth;

In my case I need to calculate the size on the elements parent as a percentage (like the full width is 24h and I want it to be resizable for each hour or half an hour).

On the parent I have a div like this:

<div :style="getStyle(data)"></div>

And this getStyle is calculating the width as a percentage basing on the data.

I am getting height issue resizable div have child with height greater that resizable div but i want same height for resizable div as child.

I tried several similar components and only this fit all my needs.
By it missing one feature which I also need - lock aspect ratio prop.

It would be great to not have default values on width and height to adapt to parent/children.

Hi thank you for sharing your wonderful job.

I'm using it on a component editor, it will not work as expected, because I need to switch beeting editing and viewer mode.
Resize functionality is working as expected: By setting an empty array to the "active" prop and it disabled resizing.

It seems that you are listening for changes on dragSelector and calling setupDragElements properly, although you are not removing previously added "drag-el" class.

It means that, once enabled, drag functionality can not be disabled by reseting the dragSelector to undefined.

//fixed version:
setupDragElements(selector) {
let nodeList = this.$el.getElementsByClassName("drag-el");
while (nodeList.length) nodeList[0].classList.remove("drag-el");
nodeList = this.$el.querySelectorAll(selector);
nodeList.forEach((el) => {
el.classList.add("drag-el");
});
this.dragElements = Array.prototype.slice.call(nodeList);
},

Thank you once again for sharing it

When set as integer it works perfect
but when I want to set in px or % it shifts up and left.

I think this is due to this bunch of code in mounted function
./node_modules/vue-resizable/dist/main.js
"number" != typeof this.left && (this.l = this.$el.offsetLeft - this.$el.parentElement.offsetLeft),
"number" != typeof this.top && (this.t = this.$el.offsetTop - this.$el.parentElement.offsetTop),

Or may be you laid down some logic in this?

When I installed, it throwed below error:
Uncaught TypeError: Cannot read properties of undefined (reading '_c')

Hi, is this package supported in vue 3?
When I tried in vue 3, I got error.
if you relpy me as soon as possible, It will be great
Thank you

If I click the Mouse right button ( Context Menu ) It fires drag:start and drag:end events. how to prevent this?

Hi,

your plugin is awesome and i have an idea how to make it even more interesting:
What about adding steps for snapping to a grid like layout.

So if you move, the div will always snap to a next step which you can define.
Like every 10, 20, 30 pixels ... or percent steps ...

Best regards, Yuri

online
right maxWidth is invalid,left is out of control

Suppose I'm resizing a component and when resize:end in some condition I need to restore back where it was previously.

Bug

Description

I used this package on my VueJs project.
Today when I want to deploy my app, but now I have a white page and nothing seems to load.

I need to deploy some features, some help would be welcomed ^^

Information

• Project technology : VueJs 2
• Navigator : Mozilla Firefox 98.0.1 (64 bits)
• Package version : 2.1.2 (Latest release)

Logs / Screeshoots

Here is the error I have via the console.

E11 doesn't support the forEach method

Not sure what the issue is but i get the above error thrown when trying to include the package. It has been setup basically the same way as your demo. Currently using vue2

There is a serious delay

Hi, It doesn't support mobile touch events

Are all those dependencies non-dev dependencies?
I'm guessing none of those are and vue could be a pear dependency

"dependencies": {
    "@babel/core": "^7.9.6",
    "@babel/preset-env": "^7.9.6",
    "cross-env": "^7.0.2",
    "vue": "^2.6.11",
    "webpack": "^4.43.0"
  },

I would like to use percentage, viewports, etc. as value of the width, height, etc., but only handles values in pixels.

Hello @nikitasnv

I am using two vue-resizable inside each other which means I want to drag parent as well as child.
The only problem I am facing is when I am dragging the child element the parent is also dragging.
I have created the example- https://codesandbox.io/s/vue-template-forked-7kyi9?file=/src/App.vue

Is there any way that If a child is dragging up then the parent can not drag?

I am using Vue 3, and I get an error. Is Vue 3 already supported?

On some Macs, our users are getting

npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: <our project>@0.0.1
npm ERR! Found: [email protected]
npm ERR! node_modules/vue
npm ERR!   vue@“2.6.12” from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer vue@“3.x” from [email protected]
npm ERR! node_modules/vue-resizable
npm ERR!   vue-resizable@“^2.0.5” from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!```

We currently cannot upgrade to Vue 3.0 on our project at this time. We also cannot definitively re-create this on all machines, but we have noticed it only happens on the Mac (w/XCode) systems. Does anyone have any insights?

Is possible disable dragging?

I was wondering if there is plans on maybe adding the ability to set the max-width relative to the view-port.

Use case is as follows (example):

• The requirement i need to meet is that the resizable component max-width needs to be relative to viewport. That is two thirds of view pport expressed either with calc(100vw * 2 / 3) or simplified 66vw)
• The way the library do the checks expecting the maxW to be a number this wont obviously work)
• One of the workarounds i tried was to set a max-width to either the resizable-component element or the parent, but no luck.

What are your opinions on the above?

Thank you so much in advance

Thanks for such a useful component.

It seems it has an issue with right to left containers. Just add 'direction:rtl' to container styles to check it out.

I think it is not a big deal it probably can be fixed by switching some right with left or something like that if the container is rtl.

(0 , t.withScopeId) is not a function

Hi,

I've added a textarea/ckeditor to a moving div, how do I block events from the drag so I can write text?

Is there any prop for aspect ratio? I want to resize the element but keep the aspect ratio.

The latest update, which was the "version": "2.0.5", makes the dragging not work. I had to use an older version "vue-resizable": "^1.2.5" to make it to work.
I am using Vue 2 and Nuxt by the way.