0

我在我的代碼中有兩個表。我想在同一個表中對行進行排序,並拖放到不同的表中。排序在同一個表中,並放在不同的表

所以我用了可排序和可拖放的可拖放函數。但只有一個正在工作 (取決於使用ID和類)。

我在這裏是新的,所以我不知道如何給鏈接,所以我粘貼我的代碼在這裏,只有拖放工作沒有排序。

這裏是我的腳本部分

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
<script type="text/javascript" src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script> 
<script type="text/javascript">//<![CDATA[ 
$(window).load(function() { 
    var fixHelperModified = function (e, tr) { 
       var $originals = tr.children(); 
       var $helper = tr.clone(); 
       $helper.children().each(function (index) { 
        $(this).width($originals.eq(index).width()) 
       }); 
       return $helper; 
      }, 
      updateIndex = function (e, ui) { 
       $('td.index', ui.item.parent()).each(function (i) { 
        $(this).html(i + 1); 
       }); 
      }; 

    $(".grid tbody").sortable({ 
     helper: fixHelperModified, 
     stop: updateIndex 
    }).disableSelection(); 
});//]]> 

</script> 
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> 
<script type="text/javascript"> 
    $(window).load(function() { 
     $("#dragdrop tr, #dragdrop1 tr").draggable({ 
      helper: 'clone', 
      revert: 'invalid', 
      start: function (event, ui) { 
       $(this).css('opacity', '.5'); 
      }, 
      stop: function (event, ui) { 
       $(this).css('opacity', '1'); 
      } 
     }); 

     $("#dragdrop, #dragdrop1").droppable({ 
      drop: function (event, ui) { 
       $(ui.draggable).appendTo(this); 
       //alert($(ui.draggable).text()); 
       //fire ajax here if needed 
      } 
     }); 
    }); 

</script> 

這是我的風格 表{邊界:棕色1px的固體}

和頭部

<h1>Table one</h1> 

<table id="dragdrop" class="grid" title="Kurt Vonnegut novels"> 
<thead> 
<tr> 
    <th class="index">No.</th> 
    <th>Year</th> 
    <th>Title</th> 
    <th>Grade</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
    <td class="index">1</td> 
    <td>1969</td> 
    <td>Slaughterhouse-Five</td> 
    <td>A+</td> 
</tr> 
<tr> 
    <td class="index">2</td> 
    <td>1952</td> 
    <td>Player Piano</td> 
    <td>B</td> 
</tr> 
<tr> 
    <td class="index">3</td> 
    <td>1963</td> 
    <td>Cat's Cradle</td> 
    <td>A+</td> 
</tr> 
<tr> 
    <td class="index">4</td> 
    <td>1973</td> 
    <td>Breakfast of Champions</td> 
    <td>C</td> 
</tr> 
<tr> 
    <td class="index">5</td> 
    <td>1965</td> 
    <td>God Bless You, Mr. Rosewater</td> 
    <td>A</td> 
</tr> 
</tbody> 
</table> 
<h1>Table two</h1> 
<table id="dragdrop1" class="grid" title="Kurt Vonnegut novels"> 
<thead> 
<tr> 
    <th class="index">No.</th> 
    <th>1Year</th> 
    <th>1Title</th> 
    <th>1Grade</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
    <td class="index">1</td> 
    <td>11969</td> 
    <td>1Slaughterhouse-Five</td> 
    <td>1A+</td> 
</tr> 
<tr> 
    <td class="index">2</td> 
    <td>11952</td> 
    <td>1Player Piano</td> 
    <td>1B</td> 
</tr> 
<tr> 
    <td class="index">3</td> 
    <td>11963</td> 
    <td>1Cat's Cradle</td> 
    <td>1A+</td> 
</tr> 
<tr> 
    <td class="index">4</td> 
    <td>11973</td> 
    <td>1Breakfast of Champions</td> 
    <td>1C</td> 
</tr> 
<tr> 
    <td class="index">5</td> 
    <td>11965</td> 
    <td>1God Bless You, Mr. Rosewater</td> 
    <td>1A</td> 
</tr> 
</tbody> 
</table> 

回答

相關問題