jquery里用拖拽的方式来排序表格及在线实例推荐 亲测 原创

文章标签: table
  • :
  • 03-30 12:53
  • :
  • 54次
  • :
  • 0条
  • 2赞

简介用jquery实现对table表格进行拖拽排序的方法,及在线实例演示。

今天和大家分享一个用jquery做的,可以对table表格拖拽排序的特效。

代码是站长自己写的,站长打算用两种方法来实现对表格的拖拽排序。

先来看方法一:

(function($){
    $.fn.dragSort=function(){
        var $dtr,$ntr;
      	$(this).find("tr").on("mousedown",function(e){
        	$dtr=$(this);
          	$(this).addClass("alert-success");
        }).on("mousemove",function(e){
          return false;
        }).on("mouseup",function(e){
          var $ntr=$(e.target).parent("tr");
          $dtr.insertBefore($ntr);
          $dtr.removeClass("alert-success");
        });
    };
})($);

这是站长用mousedown(鼠标按下)、mouseup(鼠标松开)写出来的,可以达到我们进行拖拽排序的要求,这里是在线演示:

通过拖拽来排序表格在线实例演示

但是,我们在拖拽的时候,感觉不太“直观”,所以站长打算用html5的drag,drop事件来写二种方法:

(function($){
    $.fn.dragSort=function(){
      var $tr,$tr_drag,$tr_drop;
      $tr=$(this).find("tr");
      $tr.prop("draggable","true");
      $tr.on("dragstart",function(){
      	$tr_drag=$(this);
      }).on("dragleave",function(e){
      	$tr_drop.removeClass("alert-success");
      }).on("dragover",function(e){
        $tr_drop=$(e.target).parent("tr");
        $tr_drop.addClass("alert-success");
        e.preventDefault();
    }).on("drop",function(e){
		$tr_drop.removeClass("alert-success");
      	$(this).before($tr_drag);
      });	
    };
})($);

这个方法就要比第一种方法直观多了,这里是在线演示:jquery拖拽排序表格方法二在线实例演示



您正在找的文章可能是: