Question

我有一个可排序的列表，我想将它的列表项放在表格单元格中，然后从表格单元格中删除单元格中的项目。

第一步是将列表项拖到tblcell中。表中的第二步排序列表项（2列）只能对单元格中的列表项进行排序，而不能对表的第一列中的固定数字进行排序。第三步将单元格项目返回列表。

<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="jquery-1.11.3.min.js" ></script>
<script src="jquery-ui.js"></script>

<style>
 #sortable1 {
    border: 1px solid #CCC;
    width: 220px;
    min-height: 20px;
    list-style-type: none;
    margin: 0;
    padding: 2px 0 0 0;
    float: left;
    margin-right: 5px;
    font-size:10px;
  }
  #sortable1 li {
    margin: 0 5px 5px 5px;
    padding: 2px;
    font-size: 1.2em;
    width: 200px;
  }
</style>

</head>

<body>
  <script>
  $(function() {
    $("#sortable1,.tblsort").sortable({
    items: 'td',
    cursor: 'pointer',
    connectWith: '.tblsort',
    axis: 'y',
    dropOnEmpty: true,
    receive: function(e, ui){
     $(this).find("tbody").append(ui.item);   
    }
});
  });
  </script>
 <ul id="sortable1" class="connectedSortable" style="cursor:pointer;">
   <li class="ui-state-default">Suburb</li>
  <li class="ui-state-default">City</li>
  <li class="ui-state-default">Province</li>
</ul>
   <table width="300" border="0" cellspacing="0" cellpadding="0" class="tblsort">
  <tbody>
    <tr>
      <td>1</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>2</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>3</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>

</body>
</html>

Answer 1

使用jQueryUI对表格单元格进行排序没有多大意义，因为它会破坏表格布局。对表行进行排序可能对您有用，而且不具有破坏性。

由于您需要拖放元素，因此需要使用适当的jQueryUI小部件Draggable和Droppable。

在我看来，这看起来像一个糟糕的解决方案，我宁愿使用一些按钮在列表和表格之间交换数据。这很糟糕，因为我可以看到Firefox中的一些错误，很难拖动表，但避免表行排序。但是如果你必须使用拖动，那么这是一个解决方案：

 $(function() {

   $("#draggable").draggable({
     revert: true,
     revertDuration: 0
   });
   $("#draggable").droppable({
     drop: function(event, ui) {
       var table = $(this);
       $(ui.draggable).find('td:nth-child(2n)').each(function(i) {
         table.find('li:eq(' + i + ')').text($(this).text());
       })
     }
   });
   
   $(".tblsort").droppable({
     drop: function(event, ui) {
       var table = $(this);
       $(ui.draggable).find('li').each(function(i) {
         table.find('td:nth-child(2n):eq(' + i + ')').text($(this).text());
       })
     }
   });

   $(".tblsort tbody").sortable({
     helper: function(e, ui) {
       ui.children().each(function() {
         $(this).width($(this).width());
       });
       return ui;
     },
     update: function(event, ui) {
       $(this).find('td:nth-child(2n+1)').each(function(i) {
         $(this).text(i + 1);
       });
     }
   });
   $(".tblsort").draggable({
     revert: true,
     revertDuration: 0
   });

 });

 * {
   box-sizing: border-box;
   font-family: sans-serif;
 }
 
 #draggable {
   border: 1px solid #CCC;
   width: 220px;
   list-style-type: none;
   margin: 0;
   padding: 0;
   float: left;
   margin-bottom: 20px;
 }
 
 #draggable li {
   margin: 10px;
   padding: 2px 5px;
 }
 
 .tblsort {
   border: 1px solid #ccc;
   border-spacing: 10px;
   border-collapse: separate;
   clear: both;
   cursor: grab
 }
 
 .tblsort td {
   border: 1px solid #ccc;
   padding: 2px 5px;
   cursor: ns-resize
 }
 
  .tblsort td:nth-child(1) {
   width: 30px;
 }

<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<ul id="draggable" class="connectedSortable" style="cursor:pointer;">
  <li class="ui-state-default">Suburb</li>
  <li class="ui-state-default">City</li>
  <li class="ui-state-default">Province</li>
</ul>
<table width="300" border="0" cellspacing="0" cellpadding="0" class="tblsort">
  <tbody>
    <tr>
      <td>1</td>
      <td>aa</td>
    </tr>
    <tr>
      <td>2</td>
      <td>bb</td>
    </tr>
    <tr>
      <td>3</td>
      <td>cc</td>
    </tr>
  </tbody>
</table>

同样在Fiddle。

Jquery Drag Drop从List到Table Cell的排序不起作用

1 个答案: