jquery可排序拖放項目

我使用可排序的函數來拖放我的表格。
我得到的ui.item將跟隨鼠標光標項。但我想獲得交換項目。jquery可排序拖放項目

項目1個
項目2
項目3

如果我拖動項目1項2，他們會改變自己的立場。

項目2
項目1個
項目3

我可以使用ui.item讓項目在停止事件1點的數據。但我找不到任何函數來獲取第2項數據。

如何獲取第2項數據？謝謝

來源

2017-03-07 Manlok Wong

你正在尋找的物品是不是直接放置在剛剛放置拖動物品的位置上方的物品。也就是說，如果新的排序位置是索引2.那麼你正在尋找的項目是在索引1？ – haxxxton

'ul.item'不交換。已排序的項目'ul.item'剛被移除並插入到新的位置。如果你想得到'Item 2'的數據，使用位置選擇器。 – Pugazh

@Pugazh什麼是位置選擇器？ –

<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>

來源

2017-03-07 11:08:45

jquery可排序拖放項目

回答

相關問題