正文 

当前位置： 首页 > 程序 > java教程

sortable.js在vue中实现拖拽(代码片段)

李元 李元     2022-12-01     494

关键词： 

1 npm install sortablejs --save 

2 xxx.vue

    <template>
        <div>
            <el-bgwhite>
                <el-row>
                    <el-form
                        :model="form"
                        ref="form"
                        label-width="130px"
                        size="small"
                    >
                        <el-row id="topicMove">
                            <el-row
                                class="topicSty"
                                v-for="(item, index) in form.subject"
                                :key="index"
                            >
                                <el-col :span="2" class="centerSty">
                                    index + 1
                                </el-col>
                                <el-col :span="22">
                                    <el-row>
                                        <el-col :span="16"> item.name </el-col>
                                        <el-col :span="8" class="rightSty">
                                            <el-button type="text">拖动</el-button>                                         
                                        </el-col>
                                    </el-row>
                                    <el-row
                                        v-for="(it, ind) in item.option"
                                        :key="ind"
                                        v-show="item.type != 3"
                                    >
                                        <el-col :span="16" class="mRsty"
                                            ><el-radio
                                                disabled
                                                v-if="item.type == 1||item.type == 4"
                                            ></el-radio>
                                            <el-checkbox
                                                disabled
                                                v-if="item.type == 2"
                                            ></el-checkbox>
                                             it.option_name 
                                            <el-row
                                                v-for="(itChild, indChild) in it.option_list"
                                                :key="indChild"
                                                v-show="item.type == 4"
                                                class="childRowTwo"
                                            >
                                                <el-col :span=\'22\'>
                                                    <el-radio
                                                        v-if="it.option_type==2"
                                                        disabled
                                                    ></el-radio>
                                                    <span
                                                        v-if="it.option_type==1"
                                                        >填空：</span>                                            
                                                     itChild.option_name 
                                                </el-col>
                                            </el-row>
                                        </el-col>
                                    </el-row>
                                    <el-row v-show="item.type == 3">
                                        <el-col :span="16">
                                            <el-input type="textarea"></el-input></el-col>
                                    </el-row>
                                </el-col>
                            </el-row>
                        </el-row>
                    </el-form>
                </el-row>
            </el-bgwhite>
        </div>
    </template>
    
    <script>
    import Sortable from "sortablejs";
    export default 
        data() 
        return 
            form: 
                subject: [],
            ,
        ;
    ,
        mounted() 
            this.rowDrop();
        ,
        methods: 
            //行拖拽
            rowDrop() 
                const tbody = document.getElementById("topicMove");
                var that = this;
                Sortable.create(tbody, 
                    sort: true,
                    animation: 300,
                    onEnd: function (evt) 
                        that.form.subject.splice(
                            evt.newIndex,
                            0,
                            that.form.subject.splice(evt.oldIndex, 1)[0]
                        );
                        
                        var newArray = that.form.subject.slice(0);                    
                        let nowId=newArray[evt.newIndex].id;
                        newArray.forEach((item,index)=>
                            if(item.relationList.length>0)                           
                                for(var i=0;i<item.relationList.length;i++)
                                    if(item.relationList[i].relation_subject==nowId)
                                        item.relationList.splice(i,1)
                                        i--;
                                    
                                
                            
                        )
                        that.form.subject = [];
                        that.$nextTick(function () 
                            that.form.subject = newArray;
                        );
                    ,
                );
            ,
        ,
    ;
    </script>
    
    
    
``

 

如何在vue中实现拖拽(代码片段)

1、npmi vuedraggable2、在组件中引入importvuedraggablefrom'vuedraggable';3、<template><vuedraggableclass="wrapper"v-model="list"><transition-group><divv-for="iteminlist":key="item"class="item"><p&... 查看详情

如何在vue中实现拖拽(代码片段)

1、npmi vuedraggable2、在组件中引入importvuedraggablefrom'vuedraggable';3、<template><vuedraggableclass="wrapper"v-model="list"><transition-group><divv-for="iteminlist":key="item"class="item"><p&... 查看详情

vue3中实现拖拽和缩放自定义看板vue-grid-layout(代码片段)

VueGridLayout官方文档VueGridLayout中文文档1.npm下载拖拽缩放库npminstallvue-grid-layout@3.0.0-beta1--save2. vue3使用vue-grid-layout报错：external_commonjs_vue_commonjs2_vue_root_Vue_default.aisnotaconstructor 解决方案: vue3版本记得下载对应vue-grid-layout... 查看详情

electron中实现拖拽文件进div中通过file对象获取文件的路径和内容(代码片段)

场景用HTML和CSS和JS构建跨平台桌面应用程序的开源库Electron的介绍以及搭建HelloWorld：https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/106413828Electron怎样进行渲染进程调试和使用浏览器和VSCode进行调试：https://blog.csdn.net/BADAO_LIUMANG_QIZHI/ 查看详情

element-uitable表格组件实现可拖拽效果（行列）(代码片段)

首先，需要用到第三方库，sortable.js，因为我的项目是vue，所以在package引用的是vuedraggable，而vuedraggable是包含sortable的。npminstallsortable.js--save//或者npmi-Svuedraggable//vuedraggable依赖Sortable.js& 查看详情

在 NSTableView 中实现拖放

】在NSTableView中实现拖放【英文标题】：ImplementingdraganddropinNSTableView【发布时间】：2011-08-2206:29:32【问题描述】：谁能帮我？我在下面使用了这段代码，但这些方法在执行期间没有被调用。-(BOOL)tableView:(NSTableView*)tvwriteRowsWithIndexe... 查看详情

vue+element拖动排序功能(代码片段)

...是没办法,实现吧!这功能肯定不会手撸了,直接上插件使用Sortable.js,对vue不友好,拖拽有时候乱跳;改用vuedraggable插件,此插件依赖Sortable.js.　　教程地址:https://blog.csdn.net/IT_HLM/article/details/79541741　　教程地址:https://blo 查看详情

在 Gingerbread 中实现拖放

】在Gingerbread中实现拖放【英文标题】：ImplementDrag&DropinGingerbread【发布时间】：2012-02-0620:19:10【问题描述】：我需要知道如何在Android中为Gingerbread版本实现拖放。据我所知，Gingerbread默认不支持。我编码的内容：一个ViewGroup类... 查看详情

如何在 cypress 测试中实现拖放？

】如何在cypress测试中实现拖放？【英文标题】：Howtoimplementdraganddropincypresstest?【发布时间】：2019-08-1702:14:13【问题描述】：我正在努力使用Cypress和AngularMaterialDragandDrop测试拖放。因此，目标是将“开始工作”从待办事项转移到... 查看详情

elementuitable顺序拖动(代码片段)

ElementUItable顺序拖动使用Sortable.js插件。对element-ui中的el-table进行拖拽行排序。newSortable(example1,animation:150,ghostClass:'blue-background-class');官网：[1]Sortable.js官网配置项说明等[2]Sortable更多使用示例一、基本使用1、安 查看详情

如何在unity中实现拖尾效果

在制作游戏过程中会出现鼠标滑动的实现，而为啦增强视觉效果，往往会添加拖尾或者鼠标点击的特效，接下来就说说在unity中如何实现拖尾效果，首先unity中有个组件，叫TrailRenderer,在Component——>Effect——>TrailR... 查看详情

Java 7：如何在 Java 中实现拖放？

】Java7：如何在Java中实现拖放？【英文标题】：Java7:Howtoimplementdrag&dropinJava?【发布时间】：2013-04-2515:06:25【问题描述】：我目前正在使用Java7Update21进行拖放试验。我的目标操作系统是：Windows7Ubuntu12.04MacOSX10.6/10.8要求是：将文... 查看详情

有没有办法在 phonegap angular js 项目中实现拖放？

】有没有办法在phonegapangularjs项目中实现拖放？【英文标题】：Isthereawaytoimplementdrag&dropinaphonegapangularjsproject?【发布时间】：2014-12-0116:27:04【问题描述】：我试过这个：https://github.com/codef0rmer/angular-dragdrop和touchpunch(http://touchpunc... 查看详情

sortable.js拖拽导致移动端不能点击问题

参考技术A业务场景：经过百度搜索解决方案1：给点击的事件添加阻止冒泡方法  event.stopPropagation();2：给拖拽盒子里的子元素添加 pointer-events: bounding-box属性 查看详情

uni-app拖拽排序

...手动拖动更改排序位置的功能。在经过查找之后，找到了sortable.js,它可以用来实现这个拖拽的功能。在查看sortable.js官方文档时，看到里面中有一个onUpdate事件，拖拽改变位置后，其中的返回值中，就有着起始index值和改变后的ind... 查看详情

vue.之elementdialog拖拽(代码片段)

Vue.之Elementdialog拖拽 　　默认情况下，在使用Element的Dialog模块时，弹出框是不能移动的，且一旦点击遮罩层区域，弹框就会消失。　　解决方案：　　1 在utils中新建directives.js文件importVuefrom‘vue‘//v-dialogDrag:弹窗拖拽Vue.... 查看详情

使用sortable.js,ul嵌套3层,树形结构,有个问题是能拖拽出自己当前的容器

想要的效果是平级可以拖拽排序，但是有个问题是总能越级拖拽出自己的容器，和本来的容器平级。参考技术A重新完善一下刚才没看清你的问题获取拖拽后鼠标的坐标获取父元素在屏幕上四边的坐标if判断一下超出了就阻止事件... 查看详情

带有 Vue 2.0 的 Sortable.js 排序不正确

】带有Vue2.0的Sortable.js排序不正确【英文标题】：Sortable.jswithVue2.0sortsincorrectly【发布时间】：2017-02-1314:02:13【问题描述】：我正在使用Sortable.js和Vue.js。目标是对项目进行排序并保持数据更新。它在Vue1.x上运行良好，但在更新到2... 查看详情