Question

我正在使用可排序函数来拖放我的表格。
我得到了跟随鼠标光标项的ui.item。但我想获得交换项目。

项目1 第2项第3项

如果我将项目1拖到项目2，他们将改变他们的位置。

项目2
第1项第3项

我可以使用ui.item在停止事件中获取第1项数据。但是我无法找到任何获得第2项数据的函数。

我如何获得第2项数据？谢谢

Answer 1

  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">     </script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">

  <style>
  table, tr, td, th{
    border: 2px solid blue;
  }
  td {
    width: auto;
    padding-right: 550px;
  }
  td, input {
    text-align: center;
  }
  #move {
      background: #555555;
      width: 30px;
      height: 30px;
      float: right;
      color: #fff;
      text-align: center;
      text-transform: uppercase;
      line-height: 30px;
      font-family: Arial;
      cursor: move;
  }
  </style>

  <body>
    <div id="container">
    <div class="panel panel-primary" id="main" role="main">
        <table id='myTable'>
          <thead>
            <tr>
              <th style="width:10px;text-align: center;"></th>
              <th style="width:100px;text-align: center;">Category</th>
              <th style="width:200px;text-align: center;">Document Name</th>
              <th style="width:200px;text-align: center;">Document Time</th>
              <th style="width:200px;text-align: center;">PDF File Name</th>
              <th style="width:200px;text-align: center;">Upload Time</th>
            </tr>
          </thead>
          <tbody>
            <% if (item.length) { %>
              <% for(var i = 0; i < item.length; i++) {%>
                <tr>  
                  <td align="center"><span id='move'>三</span></td>
                  <td id='orderTD' style='display:none;'><input id='order' value='<%=item[i].order%>'></input></td>
                  <td><input type='text' id='category' value='<%= item[i].Category %>' readonly></input></td>
                  <td><input type='text' id='docName' value='<%= item[i].docName %>' readonly></input></td>
                  <td><input type='text' id='docTime' value='<%= item[i].docTime %>' readonly></input></td>
                  <td><input type='text' id='fileName' value='<%= item[i].FileName %>' readonly></input></td>
                  <td><input type='text' id='fileUploadTime' value='<%= item[i].FileUploadTime %>' readonly></input></td>
                  <td align="center"><button id='edit'>Edit</button></td>
                  <td id='idTD' style='display:none;'><input id='order' value='<%=item[i].id%>'></input></td>
                  <td align="center"><button id='delete'>Remove</button></td>
                </tr>
              <% } %>
            <% } %> 
          </tbody>
        </table>
      </div>
    <script type="text/javascript">
      $(document).ready(function () {
          //make table rows sortable
          $('tbody').sortable({ 
              connectwith: 'tbody', 
              opacity: 0.6, 
              handle: "#move",
              axis: 'y',
              helper: function (e, ui) {
                  ui.children().each(function () {
                      $(this).width($(this).width());
                  });
                  return ui;
              },
              scroll: true,
              receive: function(e, ui) {
               alert($(e.target).attr('id'))
              }, //it give the id of dropped location console.log(ui.item[0].id);
              start: function(event, ui) {
                  ui.item.startOrder = ui.item.children('tr #orderTD').children('#order').val();
                  ui.item.startIndex = ui.item.index();
                  // alert(ui.item.index());
              },
              stop: function (event, ui) {
                  var endOrder = parseInt(ui.item.children('tr #orderTD').children('#order').val());

                  var endIndex = parseInt(ui.item.index());
                  var startOrder = parseInt(ui.item.startOrder);
                  var startIndex = parseInt(ui.item.startIndex);
                  var diff = startIndex - endIndex;
                  var json = {};
                  json.oldOrder = startOrder;
                  json.newOrder = endOrder + diff;
                  if(diff != 0) {
                    updatePDF(JSON.stringify(json));
                  }
              }
          }).disableSelection();
      });
    </script>
    </div> <!--! end of #container -->
  </body>

jquery可排序的拖放项

1 个答案: