FavoriteLoading
0

jqurey学习碎片-0002-jquery表格拖拽排序

如下代码:

jQuery UI 排序(Sortable) - 默认功能

#sortable1 { list-style-type: none; margin: 0; padding: 0; width: 40%;float: left; }
#sortable1 li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
#sortable1 li span { position: absolute; margin-left: -1.3em; }

#sortable2 { list-style-type: none; margin: 0; padding: 0; width: 40%; float: left; }
#sortable2 li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
#sortable2 li span { position: absolute; margin-left: -1.3em; }
#tablesort{width: 500px;}

#tablesort tr{background: #ccc;}
#tablesort td{width: 20%;}

$(function() {
$( "#sortable tbody" ).sortable();
$( "#sortable tbody" ).disableSelection();
$( "#sortable1" ).sortable();
$( "#sortable1" ).disableSelection();
$( "#sortable2" ).sortable();
$( "#sortable2" ).disableSelection();
});

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6
  • Item 7
  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6
  • Item 7
序号 名称 类型代码 含义 是否显示 操作
1 1 1 1 显示
2 2 2 2 显示
3 3 3 3 显示

需要注意的问题:
1、文件的调用

2、对DOM元素的操作:
$( "#sortable tbody" ).sortable();
$( "#sortable tbody" ).disableSelection();