vue拖动滚动条与拖拽冲突_通过拖动到滚动方向来使可滚动元素滚动的vue指令

vue拖动滚动条与拖拽冲突

Vue拖动滚动 (vue-dragscroll)

vue-dragscroll is a micro vue.js directive which enables scrolling via holding the mouse button ("drag and drop" or "click and hold" style).

vue-dragscroll是一个微型vue.js指令，可通过按住鼠标按钮(“拖放”或“单击并按住”样式)进行滚动。

View Demo 查看演示 View Github 查看Github

安装 (Installation)

通过npm (Via npm)

$ npm install vue-dragscroll

Then, in your JavaScript file:

然后，在您JavaScript文件中：

// Register dragscroll globally
import VueDragscroll from 'vue-dragscroll'
Vue.use(VueDragscroll)

// Or, register it locally in a component
import { dragscroll } from 'vue-dragscroll'
export default {
  name: 'MyComponent',
  directives: {
    'dragscroll': dragscroll
  },
}

通过CDN (Via cdn)

Download the and unpack distribution

下载和解压发行版

<script src="path/to/vue-dragscroll.min.js"></script>
<!-- OR -->
<script src="https://unpkg.com/vue-dragscroll"></script>

用法 (Usage)

Add the v-dragscroll directive to a scrollable element:

将v-dragscroll指令添加到可滚动元素：

<div v-dragscroll>
    Big text goes here...
</div>

That's it! Now you can scroll it by dragging.

而已！ 现在，您可以通过拖动来滚动它。

Keep in mind that now it is not possible to select the content with mouse, so apply the cursor: default; CSS style to prevent confusing the users (or even cursor: grab; in case the content is not a text).

请记住，现在无法用鼠标选择内容，因此应用cursor: default; CSS样式，以防止混淆用户(甚至是cursor: grab;如果内容不是文本的话)。

/* EXEMPLE */
.grab-bing {
  cursor : -webkit-grab;
  cursor : -moz-grab;
  cursor : -o-grab;
  cursor : grab;
}


.grab-bing:active {
  cursor : -webkit-grabbing;
  cursor : -moz-grabbing;
  cursor : -o-grabbing;
  cursor : grabbing;
}

You can also add the :nochilddrag argument to the v-dragscroll, which will only enable drag-scrolling for an element itself, but not for its subchildren. This can be usefull, if you want to enable the scrolling the area by dragging its empty space, but keep the opportunity to select the text (see example).

您也可以在v-dragscroll中添加:nochilddrag参数，这将仅对元素本身启用拖动滚动，而对子元素不启用拖动滚动。 如果您要通过拖动空白区域来启用滚动区域，但又要保留选择文本的机会，这将很有用(请参见示例 )。

<div v-dragscroll:nochilddrag>
  ...content
</div>

If you wish to handle enable/disable dragscrolling, you can pass a boolean as value (This doesn't apply for mobile)

如果您希望处理启用/禁用拖动滚动，则可以将boolean作为值传递(这不适用于移动设备)

<div v-dragscroll="false">
  ...content
</div>

If you wish to scroll only Vertically or Horizotally, you can use x or y modifiers.

如果只想垂直或水平滚动，可以使用x或y修饰符。

<div v-dragscroll.x="true">
  ...content
</div>
<div v-dragscroll.y="true">
  ...content
</div>

Select which elements can be dragged (data attributes method)

选择可以拖动的元素(数据属性方法)

<div v-dragscroll> 
  <div class="child">...<div><!-- can be dragged -->
  <div class="child" data-no-dragscroll>...<div><!-- can't be dragged -->
<div>

<div v-dragscroll:nochilddrag> 
  <div class="child" data-dragscroll>...<div><!-- can be dragged -->
  <div class="child">...<div><!-- can't be dragged -->
<div>

Firstchilddrag (DEPRECATED, prefer data attributes)

Firstchilddrag(不推荐使用，建议使用数据属性)

<div v-dragscroll:firstchilddrag> 
    <div class="subContainer">...<div> 
  <div>

It would be helpful if scroll were passed to the window object, when max scroll position were reached, you can use pass modifier.

如果将滚动传递到窗口对象，将很有用，当达到最大滚动位置时，可以使用pass修饰符。

<div v-dragscroll.pass>
  ...content
</div>

If you want to apply dragscroll to a child dom element you have no control over (because generated by vuejs). You can use v-dragscroll="{ target: 'element' }" to tell to which child the directive will be applied.

如果要将拖动滚动应用于子dom元素，则无法控制(因为是由vuejs生成的)。 您可以使用v-dragscroll="{ target: 'element' }"告诉指令将应用v-dragscroll="{ target: 'element' }"个子项。

<!-- Vue -->
<mycomponent v-dragscroll="{ target: '.my-draggable-div' }">
  ...content
</mycomponent>

<!-- HTML generated -->
<div class="mycomponent">
  <div class="my-draggable-div">
    ...content
  </div>
</div>

In this case to control if drag should be enabled/disabled you can add the active parameter.

在这种情况下，要控制是否应启用/禁用拖动，可以添加active参数。

<mycomponent v-dragscroll="{ target: '.my-draggable-div', active: true }">
  ...content
</mycomponent>

If you wish to ignore specific mouse buttons, you can use the following modifiers.

如果您希望忽略特定的鼠标按钮，则可以使用以下修饰符。

• noleft

  没剩

• nomiddle

  nomiddle

• noright

  无权利

• noback

  无背

• noforward

  向前

<div v-dragscroll.noleft="true">
  ...content
</div>
<div v-dragscroll.noback.noforward="true">
  ...content
</div>

大事记 (Events)

The directive provides 3 events.

该指令提供3个事件。

• dragscrollstart

  dragscrollstart

• dragscrollmove

  拖动滚动移动

• dragscrollend

  拖曳卷轴

The dragscrollmove event includes a data object with the following format:

dragscrollmove事件包括具有以下格式的数据对象：

{
  detail: {
    deltaX: 0, // if using the x modifier, or no axis modifier
    deltaY: 0, // if using the y modifier, or no axis modifier
  },
}

Example:

例：

<div
  v-dragscroll
  v-on:dragscrollstart="doSomething"
  v-on:dragscrollmove="doSomething(params, $event.detail.deltaX)"
  v-on:dragscrollend="doSomething"
>
..Content
<div>

翻译自: https://vuejsexamples.com/a-vue-directive-to-make-a-scrollable-element-scroll-by-draging-to-the-scroll-direction/

vue拖动滚动条与拖拽冲突