super. js_supler简单的Vue.js可拖动组件

super. js

拖动 (v-drag)

v-drag is a supler simple, Vue.js draggable component.

v-drag是一个易于管理的Vue.js可拖动组件。

安装 (Installation)

npm:

npm：

npm install @branu-jp/v-drag

yarn:

纱：

yarn add @branu-jp/v-drag --save

用 (Use)

Node.js env (such a .vue components):

Node.js env(例如.vue组件)：

<template>
  <div>
    <div style="position: absolute;" v-drag>
    </div>
  </div>
</template>

<script>
import drag from '@branu-jp/v-drag'

export default {
  directives: {
    drag
  }
}
</script>

Browser env: coming soon.

浏览器环境： 即将推出 。

笔记 (Notes)

An element with v-drag must have position: absolute; to be draggable.

带v-drag的元素必须具有以下position: absolute; 可以拖动。

选件 (Options)

You may desire only one part of an element to be draggable. You can achieve this by passing a string which referes to an id as argument to v-drag.

您可能只希望元素的一部分是draggable 。 您可以通过将引用id的字符串作为参数传递给v-drag 。

<div id="header">
  <div v-drag:header>
    <div>
      Some text
    </div>
  </div>
</div>

This will result in any area that is not <div id="header"> not becoming draggable. One common use case is a modal, that is only draggable when the top area is clicked.

这将导致任何不是<div id="header" >的区域都无法拖动。 一个常见的用例是模式，只有在单击顶部区域时才能拖动。

翻译自: https://vuejsexamples.com/supler-simple-vue-js-draggable-component/

super. js