https://github.com/clazex/vue-tauri-draggable

A Vue 3 plugin to provide a directive to conveniently mark Tauri draggable elements
https://github.com/clazex/vue-tauri-draggable

javascript nodejs tauri vue vue-directive vue-plugin vue3

Last synced: about 2 hours ago
JSON representation

A Vue 3 plugin to provide a directive to conveniently mark Tauri draggable elements

• Host: GitHub
• URL: https://github.com/clazex/vue-tauri-draggable
• Owner: Clazex
• License: mit
• Created: 2022-12-18T05:55:51.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2022-12-18T07:23:04.000Z (about 2 years ago)
• Last Synced: 2025-01-08T06:15:08.729Z (25 days ago)
• Topics: javascript, nodejs, tauri, vue, vue-directive, vue-plugin, vue3
• Language: JavaScript
• Homepage: https://npmjs.com/package/vue-tauri-draggable
• Size: 10.7 KB
• Stars: 1
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# vue-tauri-draggable

A Vue 3 plugin to provide a directive to conveniently mark Tauri draggable elements

## Usage

```js

import vueTauriDraggable from 'vue-tauri-draggable';

// Or CommonJS way

// const vueTauriDraggable = require('vue-tauri-draggable');

app.use(vueTauriDraggable, /* optional */ {

  // Directive name can be changed here

  // directiveName: 'draggable'

});

```

In template

```html

 

  
 

    
 

  



```


Each element with draggable directive will recursively add `data-tauri-drag-region` to all children until reaching elements with disabling directive when before mounting.

The directive is designed to be active only once to reduce overhead, since draggability of elements is not likely to change. Thus a refresh is needed to apply changes to the directive.

A CSS helper is also included to make draggable regions look more intuitive.

```css

@import 'vue-tauri-draggable/style.css';

```