Vue Draggable Div

Posted on  by admin

Theese days I have been working on my personal website, i have decided to build an tiny terminal for quering my info. My personal info is also avaiable on the website but a developer's personal website needs to be a bit nerd :D. Website is build with vuejs and bootstrap. I'm a guy that doesn't like design so my website will not be prettiest in the world but at least, i´m trying to make it functional.

Component implementation

Site will be an index of my projects (python libraries especially), usefull links that i been storing during this working years.

And of course a CV, but it will be last part. First, you need implement the component, i choose a component that delegates movement of container on header, you can move function 'drag MouseDown' to modify the behaviour.

Draggable div component

Really simple, template with 3 slots for easy custom our component. We will need 3 methods:. onclick to start dragging. This method will register two functions to handle movement: onmousemove and mouseup.

Also, it will register the first position of the container. onmousemove: Will update position of our container.

mouseup: Will delete function handlers for functions onmousemove and itself. Only need position absolute and a z-index higher than the other page components.

Component use example

Components with slots are really easy to use on vue you only need to create a tag template with attribute slot, slot value will be target component.

  • I used this component to implement a draggable terminal for my personal website, the result looks like this. If any of you wants a post of my terminal implementation on javascript leave a comment below :D.
  • Vue Component for resize and drag elements. A lightweight, no-dependency. Use draggable, resizable or both. Define sticks for resizing. Save aspect ratio for resizable components.
  • Restrict size and movement to parent element. Restrict drag to vertical or horizontal axis.
  • Register the component:. Use the component:. Type: BooleanRequired: falseDefault: false. Determines whether the component should be active.
  • Type: BooleanRequired: falseDefault: true. Determines whether the component should draggable. Type: BooleanRequired: falseDefault: true.
  • Determines whether the component should resize. Type: BooleanRequired: falseDefault: false. Limits the scope of the component's change to its parent size.

Type: BooleanRequired: falseDefault: false. Determines whether the component should retain its proportions. Type: NumberRequired: falseDefault: 200. Define the initial width of the component. Type: NumberRequired: falseDefault: 200.

Contributing

Define the initial height of the component. Type: NumberRequired: falseDefault: 50. Define the minimal width of the component. Type: NumberRequired: falseDefault: 50.

Install and basic usage

  • Define the minimal height of the component. Type: NumberRequired: falseDefault: 0. Define the initial x position of the component. Type: NumberRequired: falseDefault: 0. Define the initial y position of the component.
  • Type: Number|StringRequired: falseDefault: auto. Define the zIndex of the component. Type: ArrayRequired: falseDefault: ['tl', 'tm', 'tr', 'mr', 'br', 'bm', 'bl', 'ml'].

Define the array of handles to restrict the element resizing:.

tm - Top middle. mr - Middle right. br - Bottom right. bm - Bottom middle. bl - Bottom left. ml - Middle left. Type: StringRequired: falseDefault: both.