https://github.com/thewebkid/v-movable

A vue component or component wrapper that makes an element movable and its movements can be customized.
https://github.com/thewebkid/v-movable

javascript npm-package vue vue-component

Last synced: 6 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/thewebkid/v-movable
• Owner: thewebkid
• Created: 2019-05-10T03:08:45.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2022-12-13T04:24:06.000Z (almost 2 years ago)
• Last Synced: 2024-10-13T22:21:20.576Z (about 1 month ago)
• Topics: javascript, npm-package, vue, vue-component
• Language: JavaScript
• Homepage: http://preview.thewebkid.com/modules/v-movable
• Size: 1.19 MB
• Stars: 22
• Watchers: 1
• Forks: 8
• Open Issues: 28
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# v-movable [![npm version](https://badge.fury.io/js/v-movable.svg)](https://badge.fury.io/js/v-movable) [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

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

[Live Demo](http://thewebkid.com/modules/v-movable)

## 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

```html

    

      


         


           modal behavior`

           not movable

         

         grid:20

         Shift Key Behavior

         bounds:only y

         bounds:only x

       

    

    

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

      }

    

```