vue.draggable scroll属性容器有滚动条时是否允许拖动到隐藏区域

vue.draggable scroll属性容器有滚动条时是否允许滚动及当父容器元素有滚动条时是否允许拖动。

scroll相关属性

scroll例子

例子

webpack方式完整代码

<template>
  <div> 
<!--使用draggable组件-->
<div class="itxst">
<div style="padding-left:6px">scroll例子,父容器有滚动条时是否允许滚动</div>
<div class="col">
 <draggable v-model="arr1" :scroll="true" animation="300">
    <transition-group>
     <div :class="item.id==1?'item forbid':'item'" v-for="item in arr1" :key="item.id">{{item.name}}</div>
    </transition-group>
</draggable> 
 </div>
  </div>
  </div>
</template>
<script>
//导入draggable组件
import draggable from 'vuedraggable'
export default {
  //注册draggable组件
  components: {
            draggable,
        },
  data() {
    return {  
      //定义要被拖拽对象的数组
      arr1:[
            { id: 1, name: 'www.itxst.com' },
            { id: 2, name: 'www.jd.com' },
            { id: 3, name: 'www.baidu.com' },
            { id: 4, name: 'www.google.com' },
            { id: 5, name: 'www.taobao.com' },
            { id: 6, name: 'item 1' },
            { id: 7, name: 'item 2' },
            { id: 8, name: 'item 3' },
            { id: 9, name: 'item 4' },
        ] 
    };
  },
  methods: {    
  },
}; 
</script>
<style scoped> 
      .itxst {
           width: 60%;
           margin: 10px;
           text-align :left;
           height: 300px;
           overflow: auto;
      }
      .col {
          width: 100%;
          flex: 1;
          padding: 10px;
          border: solid 1px #eee;
          border-radius: 5px;
          float: left;
      }
      .col + .col {
          margin-left: 10px;
      }
      .item {
          padding: 20px 12px;
          margin: 0px 10px 0px 10px;
          border: solid 1px #eee;
          background-color: #f1f1f1;
          text-align: left;
      }
      .item + .item {
          border-top: none;
          margin-top: 6px;
      }
      .item:hover {
          background-color: #fdfdfd;
          cursor: move;
      } 
</style>