在表之间拖动行

Question

这个想法很简单，几乎可行。有两个表，用户可以选择在两个表之间拖动行。当一行从table1拖到table2时，使用ajax来更新数据库，使用从table1中删除并添加到table2的数据，并用新数据重新显示两个表。如果信息从表2拖到表1，情况也是如此。

您可以在这里看到一个代码示例。

以下是其中一个表的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;
    }
});

除了一种情况外，它工作得很好。如果将一行从表1拖到表2，它将创建一个槽，以显示释放该行时该行将插入的位置。换句话说，如果用户将一行从表1拖到表2的最后一个元素，它将创建一个开放的占位符（在表2中最后一行的下面），以描述释放时该行将去哪里。这有一个问题。如果创建了占位符，但将该行拖到表外并释放，则该行仍将转到占位符，但从未调用Dragable属性。

我希望发生的是，如果创建了一个占位符，无论该行放在哪里，它都将转到占位符，并调用与它被删除的表相对应的可删除代码。如果没有占位符存在，行应该回到它被拖动的地方，什么都不应该发生。

我尝试过的每个在两个表之间拖动行的示例都有相同的问题。你们有没有办法调用可删除代码，即使行被删除到表外？或者，有更好的方法调用ajax，而不是在表中删除行时调用ajax？如有任何见解，将不胜感激。

Answer 1

我想这把小提琴给了你想要的东西：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两次调用update方法

请注意，您重复了table1和table2id。我已经删除了副本，并将其中的一个移动到

还请注意`更新处理D

Answer 2

要在一行从一个表放到另一个表时触发ajax请求，可以使用sortable小部件的接收事件。

当连接的可排序列表中的一个项目被放入另一个列表时，会触发此事件。后者是事件目标。

（强调我的）

更新了小提琴（部分结果，请参阅下面的片段以获得最终演示）

在接收回调中，您可以使用第二个参数（ui.item）的item属性访问删除的行。

如果触发接收事件回调，则表示ui。项目已添加到此表（$（此）。最近的（“table.mytable”）），并从另一个表（$（“table.mytable”）中删除。不是（$（这个）。最近的（“table.mytable”））。然后可以相应地触发ajax请求。

通过这样做，您不必手动检查是否在同一表中发生了删除（如果您像某人建议的那样使用更新事件，您必须这样做）。

目前，您不必要地用以下方法初始化了两次排序：

$( "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
});

选择器t车身。connectedSortable适用于这两个表，因此它将简单地覆盖以前的初始化，因此，克隆辅助程序将始终附加到第二个表（$tabs2）。这可能不是您想要的-从外观上看，您正在初始化两次，只是为了将克隆附加到各自的父级。appendTo选项的默认值是“parent”，只需将其从初始化中删除即可。

另外，将标题行从

最后，您已经复制了无效的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"));
    }
  });
});

html" target="_blank">css prettyprint-override">.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>