thewebkid / v-movable

A vue component or component wrapper that makes an element movable and its movements can be customized.

v-movable

A vue component or component wrapper that makes an element movable and its movements can be customized.

Live Demo

Installation

npm i --save v-movable

Initialize in main.js

import movable from "v-movable";
Vue.use(movable);

Options (element attributes)

• posTop/posLeft: initial coordinate
• target: String (vue ref) - ref to element other than the component (e.g., wrap modal title in movable, and set target to the modal-body element ref)
• bounds: {x:[min,max],y:[min,max]}. Both x and y default to [-Infinity,Infinity]. Set to [min,max] ([0,0] to restrict the axis)
• vertical: [min, max] - constrain movement to y axis within min and max provided. Shorthand for bounds="{x:[0,0],y:[min,max]}"
• horizontal: [min, max] - constrain movement to x axis within min and max provided. Shorthand for bounds="{y:[0,0],x:[min,max]}"
• grid: Int - defaults to 1. snap to grid size in pixels.
• shiftKey Bool - any truthy value enables shift key to constrain movement to either x or y axis (whichever is greater). Setting any bounds option automatically disables shift key behavior.
• disabled: Bool - disables moving

Events

• @start: fires immediately after the pointerdown event on the element
• @move: fires continuously while moving
• @complete: fires after the pointerup event on the element

Usage

    <template>
      <div style="position:relative; margin:50px;">
         <div class="testmove" ref="parentEl">
           <movable class="modaltitle" target="parentEl">modal behavior</movable>`
           <span>not movable</span>
         </div>
         <movable class="testmove" posTop="444" :grid="20"><span>grid:20</span></movable>
         <movable class="testmove" posTop="222" posLeft="222" shiftKey="true"><span>Shift Key Behavior</span></movable>
         <movable class="testmove" posLeft="444" :bounds="{x:[0,0]}"><span>bounds:only y</span></movable>
         <movable class="testmove" posTop="444" posLeft="444" :bounds="{y:[0,0]}"><span>bounds:only x</span></movable>
       </div>
    </template>
    <style>
      .testmove {
        display:block;
        position: absolute;
        top: 0;
        height: 150px;
        width: 150px;
        margin: 200px;
        background: #333;
        color: white;
      }
      .modaltitle {
        background: blue;
        display:block;
        width:100%;
        color: white;
      }
    </style>

v-movable's Issues

v-movable parameters appear to not be reactive in Nuxt

I'm running this inside Nuxt v2.15.3. I'd like to be able to dynamically set the bounds limits of movable on mounted() once I can get the size of the contents inside it, but at least when testing this with xLimit below (default of 500), the limit doesn't appear to change. Similarly, I'd like to have disabled be dynamic, but that's not working, either. The element is still draggable if disabled is set to true after creation. Using the Vue inspector, it seems like altering disabled after the fact actually creates a new instance of movable, but doesn't do anything with the old one.

What's the deal here? Is this component intentionally non-reactive?

<div ref="parentEl" class="image-frame">
    <movable
      class="top-bar"
      target="parentEl"
      :bounds="{ x: [0, xLimit], y: [0, 500] }"
      :disabled="disabled"
      @move="$emit('move', $event)"
      @complete="$emit('drop', $event)"
    >
        ... contents ...
    </movable>
</div>

Disabled props not reacting

Hey, I'm using your wrapper in a project, and I was trying to disable/enable my components' movement based on a computed, but it seems to only register the first state, and won't change afterwards.

Here's a summary of my code to illustrate
The html

<movable
    :bounds="{x:[0 - post.coord_x,3840 - post.coord_x - getBoundingBox().width],y:[0 - post.coord_y, 2160 - post.coord_y - getBoundingBox().height]}"
    :posTop="post.coord_y + top"
    :posLeft="post.coord_x"
    @complete="log"
    :disabled="disableMove"
>
	... Rest of my component ...

</movable>

And in the computed

computed: {
    disableMove () {
      if (this.current.mode === 'moderee' && this.$route.params.url_participant) {
        return true
      }

      if (this.isActionMenuOpen) {
        return true
      }

      return false
    },

Basically, when I open a menu, I'm trying to 'freeze' the component in place.

v-btn inside movable

I have a v-btn inside a v-card inside a movable. Everything works fine in Firefox.
But in Chromium, the button only works when I click not on the text (CLOSE) but on the margin outside the text.
When I remove the text, it works normally. But I would like to have a text as description.

This is my code:

<template> <movable :id="myId" :posTop="lastTop" :posLeft="lastLeft" class="testmove"> <v-card :style="myStyle"> <v-btn @click="close" move-disabled="true" type="button" text> close </v-btn> </v-card> </movable> </template>

Ref/Target not working inside v-app

Hello. Good day! I have a problem in the movable component wherein when I put it inside the v-app it is not working properly.
Here is a sample code. TIA for the response. More power!

Any plans for Vue 3?

Hi, this component looks cool and I'd like to use it in a new Vue 3 project. Any plans to adopt Vue 3?

Button Inside Movable

Is there a way to place a button on a movable that calls a method in your Vue component? I tried but the button just drags the component.

Here is a simple example:
https://codesandbox.io/s/zealous-waterfall-ewln2?file=/src/App.vue

bounds with initial position doesn't work properly

I set initial position and bounds it gets these bounds from initial positions. But bounds should be set by real coordinates by parent or whatever container.

And if I set bounds later asynchronously it doesn't work.

Method example

Would you provide an example of using one of the methods please?

E.g.:
<movable class="testmove" posTop="444" :grid="20" @complete="finished()"><span>grid:20</span></movable>

Then a method:

finished (w) {
    console.log(JSON.stringify(w))
}

The idea being that this would show me the available data and that perhaps I could then save the new position with Vuex so that it can be restored on the next page load.

Dynamic Ref/Target

When I try to make a dynamic ref/target assignment it gives me an error:
Error in directive movable update hook: "TypeError: Cannot set property 'touchAction' of undefined"

Here is the example what I trying to make:

<div v-for="window of windowList" :key="window.id">
    <div class="window-container" :ref="'window' + inventory.id">
        <movable class="window-title" :target="'window' + inventory.id">
            <span>{{ inventory.name }}</span>
        </movable>
        <div class="window-content">
// content goes here
        </div>
    </div>
</div>