【JS】使用sortable实现拖拽功能

emmmmm 感觉自己是个被java耽误了的前端

闲话少说 进入正题

工作中有的时候需要实现一个拖拽功能 比如你有一个列表 然后忽然客户说 改需求了 这个列表顺序要变 你也不能说整个删了重新写一个列表吧 这多绝望啊 就有了几个解决方案：

1.弄个图标上移下移

function move(obj,fx)
{
	var parent = $(obj).parents(".ui-state-default");
	if(fx == 'up')
	{
		var prev = parent.prev();//取得同辈相邻前一个
		prev.before(parent);
	}else
	{
		var next = parent.next();
	        next.after(parent);
	}
	//移完更新+-号的显示
	checkTuBiaoIsOkay();
}

那个checkTuBiaoIsOkay纯粹是我个人强迫症 觉得第一个不能往上移就不要+号或者上箭头符号什么的 最后一个不能下移就不用-号或者下箭头什么的

这种写起来是很简单的 但是用起来就会觉得 好麻烦哦 得一个个点移动 一次还只能移动一位

反正我要是客户 我肯定会投诉的 你们什么垃圾系统 用户体验这么差

所以就有了第二种解决方案：拖拽div移动

首先需要引入Jquery-ui.js

官方肯定也是有说明的 这是官方示例地址：sortable官方示例

具体代码大概就是这样的

  
  
  
  
  


  
Item 1
  
Item 2
  
Item 3
  
Item 4
  
Item 5
  
Item 6
  
Item 7

核心用法总结起来就是 先引Jquery-ui.js 然后给你的要拖拽排序的起一个id 叫啥都行 并不重要 甚至没有id 只通过jquery选择器找到都是可以的 这个id是不重要的 然后li上的class是极其重要的ui-state-default 决定了要移动的东西是啥 然后在javascript里面找到外层的ul 使用.sortable()方法 就足够实现一个普通的拖拽效果了。

然鹅 对于完美主义者来说 这还是不够的

都没个序号 我怎么知道我拽到哪啊 自己查数么？？？？

于是就有了以下的改进 原理来说很简单 因为拖拽的交换其实就是这两位之间的交换 每次移动的时候 两两互换就可以

  
  
  
  
  

    

          

                
                1
                Item 1
          
          

                
                2
                Item 2
          
          

                
                3
                Item 3
          
          

                
                4
                Item 4
          
          

                
                5
                Item 5
          
          

                
                6
                Item 6
          
          

                
                7
                Item 7
          
    

但是这个存在一个小问题 如果是正常慢慢拖拽序号是没问题的 但是如果拽着某个元素瞎晃 会发现序号一片混乱 甚至还丢了好几个 所以有了这个相对麻烦一点的改进 根据li的顺序每次拖拽都重新排序：

  
  
  
  
  

    

          

                
                1
                Item 1
          
          

                
                2
                Item 2
          
          

                
                3
                Item 3
          
          

                
                4
                Item 4
          
          

                
                5
                Item 5
          
          

                
                6
                Item 6
          
          

                
                7
                Item 7
          
    

测试js效果可以去这个网站：在线js测试

具体效果就去把上面的代码粘进去试试喽