拖動表格之間的行

Question

這個想法非常簡單，它幾乎可以工作。有兩個表格，用戶可以選擇在兩個表格之間拖動行。當一行從table1拖到table2時，使用ajax來更新數據庫，其中包含從table1中刪除的數據，添加到table2中，並用新數據重新顯示兩個表。如果將信息從表2拖放到表1，則同樣的結果。

您可以看到代碼here的樣本。

下面是Javascript代碼爲表之一的摘錄：

var startTable = "table1"; 
var $tabs=$("#" + startTable); 
$("tbody.connectedSortable") 
.sortable({ 
    connectWith: ".connectedSortable", 
    items: "> tr:not(:first)", 
    appendTo: $tabs, 
    helper:"clone", 
    cursor:"move", 
    zIndex: 999990 
}) 
.disableSelection() 
; 
$($tabs).droppable({ 
    accept: ".connectedSortable tr", 
    hoverClass: "ui-state-hover", 
    drop:function(event, ui){ 
     var start= ui.draggable.attr("id"); 
     var desTable = $(this).attr("id"); 
     if(start != desTable){ 
      alert("The ajax should be called"); 
     } 
     return false; 
    } 
}); 

它完美，除了只有一個情況。如果將一行從Table1拖到Table2，它將創建一個插槽，以顯示該行放開時該行將被插入的位置。換句話說，如果用戶從Table1拖動一行到Table2的最後一個元素，它將創建一個打開的佔位符（在Table2的最後一行下）來描述放開後行的位置。這有一個問題。如果創建了佔位符，但該行被拖動到表外並放開，則該行仍然會轉到佔位符，但可拖動的屬性不會被調用。

我想要發生的是，如果創建了一個佔位符，無論該行放在哪裏，它都會轉到佔位符，並調用與它所在表中對應的可丟棄代碼。如果沒有地方持有人，行應該回到它被拖出的地方，什麼都不應該發生。

我試過兩個表之間拖動行的每個例子都有同樣的問題。你們有沒有辦法調用可丟棄的代碼，即使該行被丟棄在表外？或者，也許有更好的方法來調用Ajax，而不是當行被放在桌子上時？任何有識之士將不勝感激。

Answer 1

對於一行時，從一個表下降到另一個你可以使用sortable widget的receive事件觸發一個Ajax請求。

當連接的可排序列表中的項目被放入另一個列表時，將觸發此事件。後者是事件目標。

（重點煤礦）

Updated Fiddle（部分結果，請參見下面的代碼片段的最後演示）

接收回調中，你可以使用item屬性訪問下降一行第二個參數（ui.item）。

如果接收事件回調被觸發時，它意味着ui.item已被添加到this表（$(this).closest("table.mytable")）和來自其他表（$("table.mytable").not($(this).closest("table.mytable"))）除去。然後您可以相應地觸發ajax請求。

通過做這種方式，您不必手動檢查是否下降發生在同一個表或不中（你必須，如果你正在使用update事件作爲有人建議做到這一點）。

---

此刻，你不必要地初始化兩次排序：

$("tbody.connectedSortable").sortable({ 
    connectWith: ".connectedSortable", 
    items: "> tr:not(:first)", 
    appendTo: $tabs, 
    helper:"clone", 
    cursor:"move", 
    zIndex: 999990 
}) 

和

$("tbody.connectedSortable").sortable({ 
    connectWith: ".connectedSortable", 
    items: "> tr:not(:first)", 
    appendTo: $tabs2, 
    helper:"clone", 
    cursor:"move", 
    zIndex: 999990 
}); 

的選擇tbody.connectedSortable同時適用於表，因此它會簡單地覆蓋之前的初始化，結果，克隆幫助器將始終附加到第二個表（$tabs2）。這可能不是你想要的 - 從它的外觀來看，你正在初始化兩次，只是爲了將克隆附加到相應的父級。 appendTo選項的默認值是"parent"，只是從初始化中刪除它將完成這項工作。

而且，從<tbody>標題行進入<thead>元素，這樣就可以避免指定items: "> tr:not(:first)"一個好主意：它更多的語義以及爲表現略好，因爲jQuery UI的不必搜索如果沒有指定該選項，則爲無效項目。

最後，你已經複製id這是無效的。要分組一組元素，請改用普通類。

---

$(document).ready(function() { 
 
    $("tbody.connectedSortable").sortable({ 
 
    connectWith: ".connectedSortable", 
 
    helper: "clone", 
 
    cursor: "move", 
 
    zIndex: 99999, 
 
    receive: function(event, ui) { 
 
     /* here you can access the dragged row via ui.item 
 
     ui.item has been removed from the other table, and added to "this" table 
 
     */ 
 
     var addedTo = $(this).closest("table.mytable"), 
 
     removedFrom = $("table.mytable").not(addedTo); 
 
     alert("The ajax should be called for adding to " + addedTo.attr("id") + " and removing from " + removedFrom.attr("id")); 
 
    } 
 
    }); 
 
});

.mytable a:link, 
 
.mytable a:visited { 
 
    color: #fff; 
 
    font-weight: bold; 
 
    text-decoration: none; 
 
} 
 
.mytable a:active, 
 
.mytable a:hover { 
 
    color: #bd5a35; 
 
    text-decoration: underline; 
 
} 
 
table.mytable { 
 
    width: 90%; 
 
    font-family: Arial, Helvetica, sans-serif; 
 
    color: #666; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    font-size: 12px; 
 
    background: #eaebec; 
 
    border: #ccc 1px solid; 
 
    -moz-border-radius: 3px; 
 
    -webkit-border-radius: 3px; 
 
    border-radius: 3px; 
 
    -moz-box-shadow: 10px 10px 5px #888; 
 
    -webkit-box-shadow: 10px 10px 5px #888; 
 
    box-shadow: 10px 10px 5px #888; 
 
} 
 
.mytable th { 
 
    color: #fff; 
 
    padding: 21px 25px 22px 25px; 
 
    border-top: 1px solid #fafafa; 
 
    border-bottom: 1px solid #e0e0e0; 
 
    background: #191970; 
 
} 
 
.mytable th:first-child { 
 
    text-align: center; 
 
    padding-left: 20px; 
 
} 
 
.mytable tr { 
 
    text-align: center; 
 
    padding-left: 20px; 
 
} 
 
.mytable tr td:first-child { 
 
    text-align: center; 
 
    padding-left: 20px; 
 
    border-left: 0; 
 
} 
 
.mytable tr td { 
 
    padding: 18px; 
 
    border-top: 1px solid #ffffff; 
 
    border-bottom: 1px solid #e0e0e0; 
 
    border-left: 1px solid #e0e0e0; 
 
    background: #fafafa; 
 
    background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#fafa fa)); 
 
    background: -moz-linear-gradient(top, #fbfbfb, #fafafa); 
 
} 
 
.mytable tr.even td { 
 
    background: #f6f6f6; 
 
    background: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#f6f6 f6)); 
 
    background: -moz-linear-gradient(top, #f8f8f8, #f6f6f6); 
 
} 
 
.mytable tr:last-child td { 
 
    border-bottom: 0; 
 
} 
 
.mytable tr:last-child td:first-child { 
 
    -moz-border-radius-bottom-left: 3px; 
 
    -webkit-border-bottom-left-radius: 3px; 
 
    border-bottom-left-radius: 3px; 
 
} 
 
.mytable tr:last-child td:last-child { 
 
    -moz-border-radius-bottom-right: 3px; 
 
    -webkit-border-bottom-right-radius: 3px; 
 
    border-bottom-right-radius: 3px; 
 
} 
 
.mytable tr:hover td { 
 
    background: #f2f2f2; 
 
    transform: scale(1.01); 
 
    padding-left: 20px; 
 
    outline: 1px solid #191970; 
 
    -moz-box-shadow: 10px 10px 5px #888; 
 
    -webkit-box-shadow: 10px 10px 5px #888; 
 
    box-shadow: 10px 10px 5px #888; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> 
 
<table id='table1' class="mytable"> 
 
    <thead> 
 
    <tr class="table1"> 
 
     <th>col1</th> 
 
     <th>col2</th> 
 
     <th>col3</th> 
 
     <th>col4</th> 
 
    </tr> 
 
    </thead> 
 

 
    <tbody class="connectedSortable"> 
 

 
    <tr class="table1"> 
 
     <td>a</td> 
 
     <td>b</td> 
 
     <td>c</td> 
 
     <td>d</td> 
 
    </tr> 
 
    <tr class="table1"> 
 
     <td>e</td> 
 
     <td>f</td> 
 
     <td>g</td> 
 
     <td>h</td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 
<table id='table2' class="mytable"> 
 
    <thead> 
 
    <tr class="table2"> 
 
     <th>COL1</th> 
 
     <th>COL2</th> 
 
     <th>COL3</th> 
 
     <th>COL4</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody class="connectedSortable"> 
 

 
    <tr class="table2"> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     <td>4</td> 
 
    </tr> 
 
    <tr class="table2"> 
 
     <td>5</td> 
 
     <td>6</td> 
 
     <td>7</td> 
 
     <td>8</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

邊注：我已經結合類似CSS類

的disableselection()方法是從jQuery UI的棄用1.9+

Answer 2

我覺得這琴給你你想要的東西：http://jsfiddle.net/t011juda/31/

$(document).ready(function() { 
    var startTable = "table1"; 
    var $tabs = $("#" + startTable); 
    $("tbody.connectedSortable") 
      .sortable({ 
       connectWith: ".connectedSortable", 
       items: "> tr:not(:first)", 
       appendTo: $tabs, 
       helper: "clone", 
       cursor: "move", 
       zIndex: 999990, 
       start: function (event, ui) { 
        //alert("start1"); 
        var start_pos = ui.item.index(); 
        ui.item.data('start_pos', start_pos); 
       } 

      }); 

    var startTable2 = "table2"; 
    var $tabs2 = $("#" + startTable2); 

$("tbody.connectedSortable") 
     .sortable({ 
      connectWith: ".connectedSortable", 
      items: "> tr:not(:first)", 
      appendTo: $tabs, 
      helper: "clone", 
      cursor: "move", 
      zIndex: 999990, 
      start: function (event, ui) { 
       //alert("start2"); 
       var start_pos = ui.item.index(); 
       ui.item.data('start_pos', start_pos); 
       //alert(start_pos); 
      }, 
      update: function (event, ui) { 
       if (this.id == 'table2' && this === ui.item.parent()[0]) 
        alert("update2"); 
       else if (this.id == 'table1' && this === ui.item.parent()[0]) 
        alert("update1"); 
      } 
     }); 
    }); 

實際上，更新兩次列表中的解釋是這裏給出：jquery Sortable connectWith calls the update method twice

請注意，您必須table1和table2 IDS repeated.I已刪除重複項並將其中一個移至<tbody>。

還要注意的是`更新處理d & d兩種方式