demo/listDragAndSort.html

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>

	<style type="text/css">
		.drag,#dragList ul{
			list-style:none;
      height:30px

		}
		.drag li,#dragList li{
			
			float:left;
			border:1px solid #f1f1f1;
			margin-right:5px;
			padding:5px 5px;
      display:inline-block;
      }
    #dragList li{
      float:none;
    }
    #dragList{
      position:absolute;
      display:none;
			border:1px solid #f1f1f1;
			padding:5px 5px;
    }
	</style>
	<script type="text/javascript" src="../static/js/lib/jquery.js"></script>
</head>
<body>
  <div class="tab">
    <ul class="drag">
      <li sort='1' width="30px">s1ssdfsdfsdfsfds</li>
      <li sort='2' width="45px">s2sssssss</li>
      <li sort='3' width="25px">saaasdfsd3</li>
      <li sort='4' width="39px">s4</li>
      <li sort='5' width="37px">s5bbbbbbbbbbbbbbbbbbbbbbbbb</li>
    </ul>
  </div>
	<script type="text/javascript">

    function listDragAndSort($list,callback){
      var originEventPosition={},
        originTrPosition={},
        dragLi,
        listLeft=$list.offset().left,
        current,target,
        liList=$list.find("li");


    $list.delegate("li","mousedown",function(e){
      var li=$(this);
      originEventPosition={left:e.pageX,top:e.pageY};//初始事件位置
      originTrPosition={left:li.offset().left,top:li.offset().top};//初始行位置
      dragLi=li;
      current=li.prevAll().length;//当前index
      
      li.data("isDragable",true).css("visibility","hidden");
      $("#dragList").css({"top":(li.offset().top)+"px","left":(li.offset().left)+"px",width:li.outerWidth()+"px"}).html(li.html());//确保dragTable的表格样式和当前表格一样
      $("#dragList").show();
      console.log($("#dragList").offset().top);

      $("body").bind("mousemove",function(e){
        var top=originTrPosition.top+(e.pageY-originEventPosition.top),
            left=originTrPosition.left+(e.pageX-originEventPosition.left),
            widthList=[],
            oriLeft=originTrPosition.left,
            list=$list.find("li");

        for(var i=0,len=list.length-1;i<len;i++){
          oriLeft+=list.eq(i).outerWidth();
          widthList.push(oriLeft);
        }

        if(dragLi.data("isDragable")){
          $("#dragList").css({left:left+"px",top:top+"px",background:"red",opacity:0.5,cursor:"pointer"});
          //拖动

          if(left<widthList[0]){
            target=0;
          }else if(left>widthList[widthList.length-1]){
            target=widthList.length;
          }else{
            for(var i=0,len=widthList.length;i<len;i++){
              if(widthList[i]<left&&left<(widthList[i+1]||10000)){
                target=i+1;
                break;
              }
            }
          }

          if(current!==target){
            moveTr(current,target);
          }
          return false;
        }
      })
      $("#dragList").bind("mouseup",function(e){
        if(current!==target){
          moveTr(current,target);
        }
        $("#dragList").hide();
        dragLi.data("isDragable",false).css("visibility","");
        $("body").unbind("mousemove");
        return false;
      })
      return false;
    })

    if(!$("#dragList").length){
      $("body").append('<div id="dragList"></div>');
    }



    function moveTr(cur,target){
      if(target>cur){//折么好长时间啊
        $list.find("li").eq(target).after(dragLi);
      }else{
        $list.find("li").eq(target).before(dragLi);
      }
      current=target;
    }
  }
  listDragAndSort($(".drag"));
	</script>	
</body>
</html>