zoukankan      html  css  js  c++  java
  • draggable 拖拽列表排序(指定被拖拽的子元素)

    npm i  draggable 
    import draggable from 'vuedraggable';
    
     components: {
        draggable, 
      },
     myArray: [
            {
              id: 0,
              name: 0,
            },
            {
              id: 1,
              name: 1,
            },
    ]
    
    
     <el-scrollbar class="right-scroll"> 
          <draggable @change="draggableChange" animation="1000" handle=".handleclass" v-model="myArray">
            <transition-group>
              <div class="box" v-for="element in myArray" :key="element.id">
                <div class="handleclass" style="height:20px;background:#f00;cursor:move"></div>
                <div>{{element.name}}</div>
              </div >
            </transition-group>
        </draggable>
    </el-scrollbar>
    handle <example> handle=".handleclass"  选择可拖拽的ele  在.handleclass 这个选择器下的ele可以拖拽 
    
    draggable <example> draggable=".item" 里的.item 指的是可以drag的class选择器
    
    animation动画可单独放入 :animation="100"
    
    chosenClass	:ghostClass="hostClass" 被选中目标的样式,你的自定义样式可能需要加!important才能生效,并把forceFallback属性设置成true
    
    dragClass	:dragClass="dragClass"拖动元素的样式,你的自定义样式可能需要加!important才能生效,并把forceFallback属性设置成true
    
    方法
    @start="method" 当开始移动时触发method并返回event含开始位置信息等等
    @end="method" 当结束移动时触发method并返回event含开始和结束位置信息等等

    .right-scroll{
        height: 500px;
        max-height: 500px;
        >>> .el-scrollbar__wrap {
          overflow-x: hidden;
        }
        .box{
          border-radius:4px ;
          margin: 10px;
          height: 50px;
          // line-height: 50px;
          border: 1px solid #ccc;
          cursor: pointer;
        }

      }

      

  • 相关阅读:
    React Native移动框架功能研究
    移动app框架inoic功能研究
    使用Ivy管理项目中的依赖
    使用Ant自动化我们的java项目生成
    Java构建工具Ant小记(一)
    打造Ubuntu下Java开发环境
    解决系统系统管理员不允许使用保存的凭据登录远程计算机
    Ubuntu全新安装firefox最新版本
    jQuery Ready 与 Window onload 的区别(转)
    程序员的素养
  • 原文地址:https://www.cnblogs.com/daifuchao/p/14870408.html
Copyright © 2011-2022 走看看