jQuery sortierbare Drag & Drop Artikel

Ich benutze sortierbare Funktion, um Drag-and-Drop in meiner Tabelle zu tun.
Ich bekomme ui.item, das dem Mauszeigerelement folgen wird. Aber ich möchte Tauschartikel bekommen.jQuery sortierbare Drag & Drop Artikel

Artikel 1
Artikel 2
Artikel 3

Wenn ich den Punkt 1 zu Punkt 2 ziehen, werden sie ihre Position ändern.

Artikel 2
Artikel 1
Artikel 3

I ui.item können Punkt 1 Daten im Stop-Ereignis zu erhalten. Aber ich kann keine Funktion finden, um Item 2 Daten zu erhalten.

Wie kann ich Artikel 2 Daten erhalten? Danke

Quelle

2017-03-07 Manlok Wong

Wird das Element, das du suchst, nicht immer das Objekt sein, das direkt über der Position liegt, in die du gerade den Gegenstand gezogen hast. Dh, wenn die neue Sortierposition Index 2 ist. Dann ist das Objekt, nach dem Sie suchen, auf Index 1? – haxxxton

'ul.item's werden nicht ausgetauscht. Der sortierte Artikel "ul.item" wird einfach entfernt und an der neuen Position eingefügt. Wenn Sie die Daten von "Item 2" erhalten möchten, verwenden Sie einen Positionswähler. – Pugazh

@Pugazh Was ist der Positionswähler? –

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

Quelle

2017-03-07 11:08:45

jQuery sortierbare Drag & Drop Artikel

Antwort

Verwandte Themen