拖放排序列表JS插件---SortableJS使用教程

github下载地址：https://github.com/SortableJS/Sortable

个人百度网盘下载地址：

链接：https://pan.baidu.com/s/1Y4Od-Ysgs2xliTUjb16S-A 
提取码：emvt 
 

业务逻辑：

从右边全部课程区域拖拽一个副本到左边区域，右边数据源区域不能产生排序，左边内容接收区分好几个tab，每个tab内的课程ID唯一且换不影响，每个tab内的拖拽组件可排序、删除、分页。

页面引入JS：

页面代码：

【全部课程区域】

		//全部课程
		var sortable = Sortable.create(document.getElementById('items'), {
			group: {
				name: 'advanced',
				pull: 'clone',//pull用来定义从这个列表容器移动出去的设置，可设置值：true/false/'clone'/function
				put: false	//put用来定义往这个列表容器放置列表单元的的设置，true/false/['foo','bar']/function	这里用false表示列表容器不可以从其他列表容器内放入列表单元；
			},
			sort: false,//设置排序不可用
			onEnd: function(evt, obj) {//列表单元拖放结束后的回调函数
				$(evt.item).css("border", ""); //删除表示重复的样式
			},
		});

【左边内容接收区域】

（用的是layUI）

				

					

						
会员最新上架
						
即将上架
						
推荐课程
						
热门课程
					
					

						

							

							

						
						

							

							

						
						

							

							
							
						
						

							

							

						
					
				
			

		//会员最新上架sortable
		var vipSortable = Sortable.create(document.getElementById('vpiNewTab'), {
			group: {
				name: 'advanced',
				pull: true,
				put: function(evt, from, item) {//当有新组件拖过来该容器，调用该函数
					//去重
					return norepeat(evt, item,3);
					
				},

			},
			onAdd: function(evt) { //拖拽完成调用该函数
			    //添加组件到会员最新上架Tab
				addItem(evt.newIndex, evt.item, evt.to, 3);
			},
			onUpdate: function(evt) {//	列表单元在列表容器中的排序发生变化后的回调函数
				//容器内只有一个组件的时候拖拉不会触发该函数

                //拖拽更新排序位置
				sortCourses(evt,3);

			},
		});

参考资料：

https://segmentfault.com/a/1190000008209715?utm_source=tag-newest

https://www.jb51.net/article/96446.htm

 

该页面全部代码：

    
    





    
    

        

            

                
会员最新上架
                
即将上架
                
推荐课程
                
热门课程
            
            

                

                    

                    

                
                

                    

                    

                
                

                    

                    

                
                

                    

                    

                
            
        
    
    
    

        

            全部课程
            

        
        

            

                课程名称：
                

                    
                
                搜索