本文实例为大家分享了Vue.Draggable拖拽功能的具体代码,供大家参考,具体内容如下

使用cmd命令在项目根目录下下载安装Vue.Draggable

npm install vuedraggable 

在组件中需要使用的引入

import draggable from \'vuedraggable\' 

注册组件

components:{
    draggable
  } 

vue的template代码如

<draggable v-model=\"itemlis\"

//开始移动方法
 :move=\"getdata\" 
 @update=\"datadragEnd\"

//参数配置 
 :options=\"{animation: 60,handle:\'.drag-icon\'}\"
 >
  <transition-group>
       <el-row class=\"album-list-list-item\" v-for=\"(item,index) in itemlis\" :key=\"item.id\">
       <el-col :span=\"13\">
       <div class=\"grid-content \">
         <i class=\"icon drag-icon iconfont icon-Icon-tuozhuai\"></i>
         <el-checkbox v-model=\"item.checked\" :value=\"item.id\"></el-checkbox> <span class=\"album-info-net\">{{item.net}}</span>
        </div>
       </el-col>
        <el-col :span=\"4\">
        <div class=\"grid-content \">
       <span>{{item.time}}</span>
        </div>
      </el-col>
    <el-col :span=\"4\">


      <el-popover
         placement=\"left-start\"
         visible-arrow=false
         width=\"120\"
         trigger=\"hover\"
              >
        <div class=\"code-img\">
          <img src=\"../assets/images/1.png\"/>
        </div>
       <span slot=\"reference\">{{item.wqcode}}</span>
         </el-popover>

        </el-col>

       <el-col :span=\"3\">
        <div class=\"grid-content album-l-l-tool \">
        <div class=\"more-tip-op\">
           <el-dropdown>
             <span class=\"el-dropdown- \"><em class=\"el-icon-more\"></em></span>
             <el-dropdown-menu slot=\"dropdown\" >
                 <el-dropdown-item :data-url=\"item.opUrl.removeUrl\" @click.native=\"moveTo(item,$event)\">移动</el-dropdown-item>
                 <el-dropdown-item :data-url=\"item.opUrl.copyUrl\" @click.native=\"copyTo(item,$event)\">复制</el-dropdown-item>
                 <el-dropdown-item @click.native=\"itemDel(index,$event)\" :data-url=\"item.opUrl.delUrl\">删除 </el-dropdown-item>
                 <el-dropdown-item :data-url=\"item.opUrl.exportUrl\">导出</el-dropdown-item>
                 <el-dropdown-item :data-url=\"item.opUrl.editName\" @click.native=\"getEditDialog(item,$event)\">编辑</el-dropdown-item>
                 <el-dropdown-item @click.native=\"getCodeDialog(item,$event)\" >查看二维码</el-dropdown-item>

               </el-dropdown-menu>
               </el-dropdown>
              </div>
          </div>
      </el-col>
   </el-row>
</transition-group>
</draggable>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

收藏 打印