Question

这个想法非常简单，几乎可以运作。有两个表，用户可以选择在两个表之间拖动行。当一行从table1拖到table2时，使用ajax以使用从table1中删除的数据更新数据库，添加到table2，并使用新数据重新显示这两个表。如果将信息从table2拖到table1，也会有同样的效果。

您可以看到代码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的最后一行下）来描述放开时行的位置。这有一个问题。如果创建了占位符但是然后将行拖到表外并放开，该行仍然会转到占位符，但永远不会调用draggable属性。

我想要发生的是，如果创建了占位符，无论行放在哪里，它都将转到占位符并调用与放置的表对应的可放置代码。如果没有占位符，则该行应该返回到它被拖动的位置，并且不会发生任何事情。

我尝试过的每个例子都在两个表之间拖动行有同样的问题。你有没有办法调用droppable代码，即使行被丢弃在表外？或者也许有一种更好的方法来调用ajax而不是将行放在桌面上？任何见解将不胜感激。

Answer 1

为了在从一个表删除一行到另一个表时触发ajax请求，您可以使用receive小部件的sortable事件。

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

（强调我的）

Updated Fiddle（部分结果，请参阅以下代码段进行最终演示）

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

如果触发了接收事件回调，则表示已将ui.item添加到this表（$(this).closest("table.mytable")）并从其他表（$("table.mytable").not($(this).closest("table.mytable"))）中删除。然后，您可以相应地触发ajax请求。

通过这种方式，您不必手动检查是否在同一张桌子内发生了丢弃（如果你正在使用{{>你必须这样做3}}有人建议的事件）。

目前，您已经不必要地使用以下方法初始化可排序的两次：

$( "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）。它可能不是你想要的 - 从它的外观来看，你只是为了将克隆附加到相应的父级而初始化两次。 update选项的默认值为"parent"，只需将其从初始化中删除即可完成此任务。

此外，最好将标题行从<tbody>移动到<thead>元素，以便您可以避免指定items: "> tr:not(:first)"：它更具语义性，也更好一点性能，因为如果没有指定该选项，jQuery UI不必搜索无效项目。

最后，您复制了id个无效的内容。要对一组元素进行分组，请改为使用公共类。

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

旁注：我已将相似的CSS类

组合在一起

jQuery UI 1.9+
不推荐使用appendTo方法

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次ID。我已删除重复项并将其中一项移至<tbody>。

另请注意，`update双向处理D＆amp; D

在表之间拖动行

2 个答案: