Vue3拖拽插件Vue.Draggable.next

最新推荐文章于 2024-06-01 15:46:07 发布
最新推荐文章于 2024-06-01 15:46:07 发布
阅读量1.2w 收藏 21
点赞数 1
分类专栏： 前端好用插件推荐 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46627407/article/details/125624211
版权

Vue3拖拽插件Vue.Draggable.next

vue.draggable.next 是一款vue3的拖拽插件,基于Sortable.js实现的，你可以用它来拖拽列表、菜单、工作台、选项卡等常见的工作场景，具体效果可见下图
如何寻找一款优雅、简洁、好用的vue3拖拽插件，笔者在开发过程中找到了这款插件，因而做一个简单分享
在这里插入图片描述

上手示例

需求：实现一个可拖拽列表
1.安装插件

yarn add vuedraggable@next
npm i -S vuedraggable@next

2.引入插件

import {
   VueDraggableNext} from 'vue-draggable-next'

3.组件编写


                

                
                
        

        

    




        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  浪漫文艺前端程序猿
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    1
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    21
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                  1
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
VueDraggableNext实现简单表格拖拽

				
			

			

				

					qq_43531886的博客
				

				

					02-17
					
					2715
					
				

			

		

		

			
				
下载依赖


npm install vue-draggable-next
//or
yarn add vue-draggable-next



引入


import { VueDraggableNext } from 'vue-draggable-next'
components: {
   draggable: VueDraggableNext,
},



使用


  <div class="app-container">
    <table class="tableD...

			
		

	



                

              
                



	

		

			

				
					
vue.draggable.next:基于Sortable.js的Vue 3兼容拖放组件

				
			

			

				

					04-01
				

			

		

		

			
				
vue.draggable.next
 Vue组件（Vue.js 3.0）允许拖放并与视图模型数组同步。
 对于Vue 2和Vue 1版本，请检查：  : 
 基于并提供所有功能
演示版
现场演示
特征
全面支持功能：
 支持触摸设备
支持拖动手柄和可选文本
智能自动滚动
支持不同列表之间的拖放
没有jQuery依赖
保持同步HTML并查看模型列表
兼容Vue.js 3.0 Transition-Group
 取消支援
需要完全控制的事件报告任何更改
重用现有的UI库组件（例如 ， 或等），并使用tag和componentData道具使其可拖动
捐
觉得这个项目有用吗？ 你可以给我买一个 :hot_beverage: 或一个 :beer_mug:
安装
用npm或纱
yarn add vuedraggable@next
npm i -S vuedraggable@next
直接链接
< script src =" //cdnjs.c

			
		

	



                


  
              

                


	

		

			

				
					
vue3 vue-draggable-next 实现拖拽穿梭框效果

					
最新发布

				
			

			

				

					游九尘的博客
				

				

					06-01
					
					574
					
				

			

		

		

			
				
【代码】vue3 vue-draggable-next 实现拖拽穿梭框效果。

			
		

	





	

		

			

				
					
vue3使用拖拽组件draggable.next的使用教程【保姆级】

				
			

			

				

					qq_38686683的博客
				

				

					03-23
					
					1万+
					
				

			

		

		

			
				
vue3+draggable.next+ts+element 完成类表格设计器的操作，拖拽中出现的问题解决

			
		

	



		

			
		



	

		

			

				
					
vue3 vue.draggable.next 拖拽插件

				
			

			

				

					qq_33365152的博客
				

				

					08-22
					
					2661
					
				

			

		

		

			
				
【笔记】vue3 vue.draggable.next 拖拽插件

			
		

	





	

		

			

				
					
Vue-Draggable-Next：下一代Vue.js拖放组件的高效解决方案

				
			

			

				

					gitblog_00034的博客
				

				

					04-18
					
					656
					
				

			

		

		

			
				
Vue-Draggable-Next：下一代Vue.js拖放组件的高效解决方案
项目地址:https://gitcode.com/anish2690/vue-draggable-next
Vue-Draggable-Next 是一个基于Vue 3和Vitest的高性能拖放库，它是对流行的vue-draggable的现代化升级。此项目旨在为Vue开发者提供简单易用、功能丰富的拖放体验。
技术解析
V...

			
		

	





	

		

			

				
					
vue3使用拖拽组件draggable-next的使用教程【保姆级】

				
			

			

				

					唐唐唐行的博客
				

				

					06-07
					
					1万+
					
				

			

		

		

			
				
vue3使用拖拽组件draggable-next的使用教程

			
		

	





	

		

			

				
					
vue3 拖拽插件 vue-draggable-next食用方式

				
			

			

				

					qq_37107602的博客
				

				

					09-12
					
					917
					
				

			

		

		

			
				
背景：根据公司产品要求，需要在一个页面实现分组拖拽功能，如图所示，拖入到不同的分组则方块变为对应的颜色。其中，每个组的样式对应不同的样式即可，样式自定义。首先，引入vue-draggable-next。第二步，在对应页面引入插件。定义三个组分别对应的数组。

			
		

	





	

		

			

				
					
vue中使用viewer.js 插件预览图片

				
			

			

				

					03-27
				

			

		

		

			
				
 draggable: true, // 是否允许拖动图片，默认为true  mouseWheelZoom: true, // 是否允许鼠标滚轮缩放图片，默认为true  toggleOnDblclick: true, // 是否在双击时切换全屏，默认为true  moveOnMouseMove: true, //...

			
		

	





	

		

			

				
					
Vue.Draggable实现拖拽效果

				
			

			

				

					12-11
				

			

		

		

			
				
快速实现Vue.Draggable的拖拽效果，供大家参考，具体内容如下 1.下载包：npm install vuedraggable 配置：package.json  "dependencies": {  "element-ui": "^1.3.4",  "less": "^2.7.2",  "less-loader": "^4.0.4",...

			
		

	





	

		

			

				
					
Vue3+element-plus-table-dragable(Sortable.js)实现表格拖动排序

				
			

			

				

					06-15
				

			

		

		

			
				
在网上找的（vue3+sortable.js根本跑不起来）网上好多例子在vue3下根据跑不起来于是，也没有对表格排序的例子。Vuedraggable 是基于并提供Sortable.js的所有功能。重用现有element-plus组件库。对于小白来说怎么在...

			
		

	





	

		

			

				
					
vue-next-drag:vue3 可视化拖拽demo

				
			

			

				

					05-02
				

			

		

		

			
				
在"vue-next-drag"项目中，我们关注的是Vue 3的一个特定特性：可视化拖拽功能。这个项目是一个Vue3的示例，展示了如何在应用中实现拖放操作。  Vue 3 的核心变化之一是引入了Composition API，这是一个用于组合组件...

			
		

	





	

		

			

				
					
Vue3如何使用vue.draggable.next完成拖拽功能

				
			

			

				

					qq_57229245的博客
				

				

					09-06
					
					1792
					
				

			

		

		

			
				
环境：Vue3+setup语法。

			
		

	





	

		

			

				
					
Vue3 使用 vuedraggable

					
热门推荐

				
			

			

				

					lhz_333的博客
				

				

					03-10
					
					2万+
					
				

			

		

		

			
				
本文主要记录下vuedraggable 在 vue2 和 vue3 中使用上的区别。

			
		

	





	

		

			

				
					
在vue.draggable.next拖拽差中使用组件时遇到的问题

				
			

			

				

					Xue_BT的博客
				

				

					01-22
					
					851
					
				

			

		

		

			
				
vue.draggable.next 中文文档 - itxst.com问题描述：在draggable标签中定义的组件，通过ref不能正确拿到相应数组在vue3中定义组件的ref，如果有多个相同名称的组件，会将ref.value的值变为数组。在vue.draggable.next提供的draggable标签中定义组件，如果有多个相同名称的组件，ref.value的值为循环后的最后一个数据。


2、子组件代码




3、页面打印结果

 代码如下：


打印结果：

			
		

	





	

		

			

				
					
Vue3中使用Vuedraggable拖拽

				
			

			

				

					weixin_53035812的博客
				

				

					07-13
					
					4767
					
				

			

		

		

			
				
二 、使用




三、Api



原文地址：Vue3中简单使用vuedraggable拖拽_冷太阳a的博客-CSDN博客_vue3 拖拽感谢原文作者分享文档地址：vue.draggable一款基于vue的拖拽插件 - itxst.com

			
		

	





	

		

			

				
					
vue3拖拽排序 使用 vuedraggable

				
			

			

				

					weixin_43512977的博客
				

				

					11-21
					
					689
					
				

			

		

		

			
				
vue3 使用 vuedraggable 拖拽排序

			
		

	





	

		

			

				
					
vue3使用vuedraggable实现拖拽（有过渡）

				
			

			

				

					stay hungry, stay foolish
				

				

					03-29
					
					4641
					
				

			

		

		

			
				
vue3使用vuedraggable实现拖拽

			
		

	





	

		

			

				
					
vue.draggable.next

				
			

			

				

					08-22
				

			

		

		

			
				
vue.draggable.next是一个基于Sortable.js实现的Vue 3拖拽插件。它可以用于拖拽列表、菜单、工作台、选项卡等常见的工作场景。通过安装插件，并引入VueDraggableNext组件，你可以在Vue 3项目中使用这个插件来实现可...

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		
评论 1

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值