在前端開(kāi)發(fā)中，拖拽是常見(jiàn)的一種操作方式。而在后端開(kāi)發(fā)中，我們也需要處理拖拽的相關(guān)操作。PHP中的TR拖拽正是一種非常實(shí)用的技術(shù)，可以實(shí)現(xiàn)表格內(nèi)容的拖拽排序、拖拽添加等功能。

使用TR拖拽實(shí)現(xiàn)表格內(nèi)容的排序，非常的簡(jiǎn)單。我們只需要在頁(yè)面加載時(shí)，將表格的排序區(qū)域設(shè)置為可拖拽狀態(tài)，即可實(shí)現(xiàn)拖拽排序。例如下面的代碼：

<code>sortable.js
$(document).ready(function(){
$('table tbody').sortable({
helper: fixHelper,
placeholder: 'placeholder',
start: function(e, ui){
$(ui.helper).addClass('dragging').attr('start-index', $(ui.helper).index());
$('.placeholder').css({
"visibility":"visible",
"height": $(ui.helper).height()
});
},
stop: function(e, ui){
$(ui.item).removeClass('dragging').attr('stop-index', $(ui.item).index());
}
});
function fixHelper(e, ui){
ui.children().each(function(){
$(this).width($(this).width());
});
return ui;
}
});
</code>

在上面的代碼中，我們使用了jQuery的sortable插件來(lái)實(shí)現(xiàn)排序。我們首先將表格的tbody標(biāo)簽設(shè)置為可拖拽狀態(tài)，然后在start和stop事件中進(jìn)行對(duì)應(yīng)的操作，比如添加或刪除某一行。同時(shí)，我們將placeholder的高度設(shè)置為拖拽對(duì)象的高度，以便于拖拽效果的視覺(jué)效果。

除了實(shí)現(xiàn)拖拽排序之外，我們還可以使用TR拖拽實(shí)現(xiàn)表格內(nèi)容的拖拽添加。例如下面的代碼：

<code>droppable.js
$(document).ready(function(){
$('table tbody tr').draggable({
helper: function(event){
var $tr = $(this);
var $clone = $tr.clone();
$clone.children().each(function(index){
$(this).width($tr.children().eq(index).width());
});
return $clone;
},
start: function(e, ui){
$('.placeholder').css({
"visibility":"visible",
"height": $(ui.helper).height()
});
},
stop: function(e, ui){
$('.placeholder').css({
"visibility":"hidden",
"height": "0"
});
}
});
$('table tbody tr').droppable({
drop: function(event, ui){
var $draggedRow = $(ui.draggable);
var newRow = $draggedRow.clone();
newRow.children().each(function(index){
$(this).width($draggedRow.children().eq(index).width());
});
if($(this).hasClass('placeholder')){
newRow.insertAfter($('table tbody tr:last'));
}else if($(this).hasClass('empty')){
newRow.insertAfter($(this).prev('tr'));
}else {
if($(this).hasClass('even')){
newRow.insertAfter($(this));
$(this).next('.odd').addClass('even');
newRow.removeClass('odd').addClass('even');
}else{
newRow.insertAfter($(this));
$(this).next('.even').addClass('odd');
newRow.removeClass('even').addClass('odd');
}
}
}
});
});
</code>

在上面的代碼中，我們使用了jQuery的draggable和droppable插件來(lái)實(shí)現(xiàn)拖拽添加。我們首先將表格的所有行都設(shè)置為可拖拽對(duì)象，使用clone()方法來(lái)克隆拖拽對(duì)象，然后在drop事件中對(duì)拖拽所在的位置進(jìn)行判斷，從而實(shí)現(xiàn)表格內(nèi)容的拖拽添加。其中需要注意的是，因?yàn)橥献У牟僮鲿?huì)對(duì)表格的內(nèi)容也就是html結(jié)構(gòu)進(jìn)行更改，所以需要在拖拽結(jié)束時(shí)對(duì)拖拽對(duì)象和拖拽目標(biāo)的html結(jié)構(gòu)進(jìn)行恢復(fù)。

總的來(lái)說(shuō)，TR拖拽是一種非常實(shí)用的技術(shù)，可以在后端開(kāi)發(fā)中幫助我們處理一些常見(jiàn)的操作，比如表格內(nèi)容的排序和拖拽添加等等。通過(guò)靈活運(yùn)用這個(gè)技術(shù)，我們可以為用戶提供更加舒適和便捷的用戶體驗(yàn)。