vue3 draggable anywhere

Table of Contents

1. Introduction

• 1.1 Project Overview
• 1.2 Installation

2. Usage

• 2.1 Basic Usage
• 2.2 Example With Configuration
• 2.3 Example With Multiple Draggable Elements With Configuration

3. Properties of Configuration
4. Why Choos Vue Draggable
5. Key Features

Project Overview

vue-draggable-anywhere is a Vue.js package supported by Vue3 that enables draggable behavior for HTML elements. It provides an easy-to-use directive to make any element draggable within a specified boundary.

get vue-draggable in npmjs.com

Why Choos Vue Draggable

1. Support for Vue 3:

   • Description: Specifically designed for Vue.js 3.

2. Cross-Browser Compatibility:

   • Description: Tested for cross-browser compatibility to ensure consistent behavior across various web browsers.

3. Detailed Documentation:

   • Description: Comprehensive documentation with clear examples and explanations for easy implementation and troubleshooting.

4. Community Support:

   • Description: Active community support for addressing issues, answering queries, and contributing to the enhancement of the package.

5. Examples:

   • Description: Provides examples for basic usage and advanced configurations with multiple draggable elements.

Installation

To use this package in your Vue.js project, you need to install it using npm. Run the following command in your terminal:

npm  install  vue-draggable-anywhere

Basic Usage

To make an element draggable, use the v-draggable directive on the desired HTML element. Below is an example of how to use it:

<template>
  <div  style="height: 400px; width: 100%;background: cornflowerblue;">
    <p>{{ position }}</p>
    <button
      v-draggable
      style="width: 40px; height: 40px; background: red; display:flex; align-items: center;text-align: center; cursor: move; color: white;border-radius: 50%;"
    >
      Move
    </button>
  </div>
</template>

<script  setup>
  import useDraggable from 'vue-draggable-anywhere'
  const { vDraggable, position } = useDraggable()
</script>

Example With Configuration

<template>
  <div  class="parentClass"  style="height: 400px; width: 400px; margin: 20px; background: cornflowerblue;">
    <p>{{ position }}</p>
    <button
      v-draggable="configuration"
      style="width: 40px; height: 40px; background: red; display:flex; align-items: center;text-align: center; cursor: move; color: white;border-radius: 50%;"
    >
      Move
    </button>
  </div>
</template>

<script  setup>
  import useDraggable from 'vue-draggable-anywhere'

  const { vDraggable, position } = useDraggable()
  const configuration = {
    boundaryElement: '.parentClass',
    boundary: true,
    boundaryOffset: {
      x: -20,
      y: 30
    },
    onDragging: test,
    afterDragEnd: test
  }

  function test(position) {
    console.log(position)
  }
</script>

Example With Multiple Draggable Elements With Configuration

<template>
  <div  class="parentClass"  style="height: 400px; width: 400px; margin: 20px; background: cornflowerblue;">
    <p>{{ position }}</p>
    <button
      v-draggable="configuration"
      style="width: 40px; height: 40px; background: red; display:flex; align-items: center;text-align: center; cursor: move; color: white;border-radius: 50%;"
    >
      Move 1
    </button>
    <button
      v-draggable="configuration"
      style="width: 40px; height: 40px; background: red; display:flex; align-items: center;text-align: center; cursor: move; color: white;border-radius: 50%;"
    >
      Move 2
    </button>
  </div>
</template>

<script  setup>
  import useDraggable from 'vue-draggable-anywhere'

  const { vDraggable, position } = useDraggable()
  const configuration = {
    boundaryElement: '.parentClass',
    boundary: true,
    boundaryOffset: {
      x: -20,
      y: 30
    },
    onDragging: test,
    afterDragEnd: test
  }

  function test(position) {
    console.log(position)
  }
</script>

note: If you want you can use separate configuration for every element, if you don't need configuration you can skip.

Key Features

1. Mobile Touch Support:

   • Description: Provides touch support for mobile devices, enabling seamless dragging on touch screens.

2. Multi-Element Draggable Support:

   • Description: Allows the implementation of multiple draggable elements on the same page, each with its own configuration.

3. Conditional Draggable:

   • Description: Provides the option to conditionally enable or disable dragging based on certain criteria.

4. Separate Configurations:

   • Description: Allows using separate configurations for each draggable element if needed.

5. Dynamic Position Tracking:

   • Description: Dynamically tracks and displays the position of the draggable element during and after dragging.

6. Event Handling:

   • Description: Supports callback functions for events such as drag start, dragging, and drag end.

7. Boundary Element:

   • Description: Option to specify a boundary element to constrain the draggable element within a certain area.

8. Scrollable Container Support:

   • Description: Allows specifying a scrollable parent element, ensuring proper functionality within scrollable containers.

Properties Of Configuration

All the properties of the configuration are optional

x

• Type: Number
• Default: 0
• Description: Initial x position

y

• Type: Boolean
• Default: 0
• Description: Initial y position

initial x and y value also depend on offset

draggable

• Type: Boolean
• Default: true
• Description: Set to false to disable dragging.

boundary

• Type: Boolean
• Default: false
• Description: Set to true to define a boundary for the draggable element.

boundaryOffset

• Type: Number/Object
• Default: 0
• Description: Define the offset amount of the draggable element outside/inside the boundary. for outer offset set negative value.
• Note: boundaryOffset not work if boundary set to false
• Example: boundaryOffset: 0 or boundaryOffset: {x: 20, y: -40}

boundaryElement

• Type: String

• Default: None

• Description: CSS selector of the boundary element, that contains the draggable element. For example code follow this section: Example with configuration

scrollableParentElement

• Type: String
• Default: body element
• Description: CSS selector of the scrollable container, here is an example for better understanding.

Example Code:

<template>
  <p>{{ position }}</p>
  <main  class="scrollableParentElement"  style="height: 300px; width: 300px; overflow: auto; background-color: springgreen; padding: 16px;">
    <div  class="boundaryElement"  style="height: 500px; width: 100%; background-color: tomato;">
      <button  v-draggable="configuration"  style="width: 50px; height: 50px; background: white;">
        Move
      </button>
    </div>
  </main>
</template>

<script  setup>
  import useDraggable from 'vue-draggable-anywhere'

  const { vDraggable, position } = useDraggable()
  const  configuration  = {
    boundaryElement: '.boundaryElement',
    scrollableParentElement: '.scrollableParentElement',
    boundary: true,
    boundaryOffset: {
      x: 10,
      y: 0
    }
  }
</script>

onDragStart

• Type: Function
• Default: None
• Description: Functional prop called when drag starts, returns the current position of the draggable element.
• example: onDragStart: yourFunction

onDragging

• Type: Function
• Default: None
• Description: Functional prop called during dragging, returns the current position of the draggable element.
• example: onDragging: yourFunction

afterDragEnd

• Type: Function
• Default: None
• Description: Functional prop called after the drag ends, returns the current position of the draggable element.
• example: afterDragEnd: yourFunction