vue-draggable-resizable

vue-draggable-resizable copied to clipboard

I am using your library to create a management dashboard. It works well for what I am considering to do except when the user wants to see dashboard on a smaller screen like tablet or mobile. Is there any way to make draggable components responsive?

I think a possible solution could be using percentage value instead of px in the style properties, calculated based on parent height and width.

Instead of: <div class="vdr draggable active" style="top: 222px; left: 264px; width: 50px; height: 50px; z-index: auto;"> Using this: <div class="vdr draggable active" style="top: 22%; left: 33%; width: 50px; height: 50px; z-index: auto;">

@Saraad in your case you can use a fixed size to allow user to edit the dashboard and then save the percentage value calculating by yourself outside the draggable component. When you render the dashboard you have to use values saved in percentage and this should give you the responsiveness that you need.

Certainly if the draggable component was able to expose (and use) x and y values in percentage it would be awesome :wink:

In my case solved the issue by adding ref to the parent dom elelment.

<div  ref="parent">
            <vue-draggable-resizable
            :style="{  width:elem.width +'%', height: elem.height +'%', left: elem.x+'%', top: elem.y+'%' }"
            @resizing="(left, top, width,height) => onResizing( idx, width,height )"
            @dragging="( left, top) => onDragging( idx, left, top)"
            :parent="true"  >
             </vue-draggable-resizable>
</div> 

Then accessing getting parent dimensions and calculating percentages on resizing/dragging events.

  methods: {
    onDragging( id, left, top) {
      let x = (left / this.$refs.parent.offsetWidth )* 100 ;
      let y = (top / this.$refs.parent.offsetHeight) * 100;

      this.elements[id].x = x;
      this.elements[id].y = y;
    },
    onResizing( id, width, height) {
      let w = (width / this.$refs.parent.offsetWidth) * 100 ;
      let h = (height / this.$refs.parent.offsetHeight) * 100;

      this.elements[id].width = w;
      this.elements[id].height = h;
    }
  },