相关文章推荐
沉稳的手链  ·  AttributeError: ...·  7 月前    · 
阳刚的皮带  ·  java - Using Jackson ...·  1 年前    · 

vue-draggable怎样限定拖动的范围

可以通过设置 "drag-handle" 属性和 "draggable" 属性的限制来限定拖动的范围。例如:

<draggable v-bind="dragOptions" :list="list" @end="onEnd">
  <div v-for="item in list" :key="item.id" class="drag-item">
    <div class="drag-handle" v-if="dragOptions.handle">{{ item.name }}</div>
    <div v-else>{{ item.name }}</div>
  </div>
</draggable>

其中 "dragOptions" 中的内容:

data() {
  return {
    dragOptions: {
      handle: '.drag-handle',
      draggable: '.drag-item',
      animation: 200
    list: [{
        id: 1,
        name: 'Item 1'
        id: 2,
        name: 'Item 2'
        id: 3,
        name: 'Item 3'

这样只有当用户拖动 ".drag-handle" 类名的元素时才能拖动 ".drag-item" 类名的元素。

  •