制表符将行拖到 div

Question

在 tabulator 中，我可以在 table 之间移动行，而且效果很好。我想将行移动到更新 table 的 <div>，而不是将行拖到 table。

我尝试使用 <div ondrop="drop(event)">，使用删除函数更新 table，但是当我删除行时 drop 函数没有被触发。

查看tabulator的源代码，似乎行没有设置为可拖动对象，在我对javascript的非常有限的理解中，需要使用ondrop。

我想知道是否有一个简单的解决方案。

更新：这是一个简单的代码片段，其中包含我想要实现的示例：

var data1 = [{
    "name": "John",
    "city": "New York"
  }, {
    "name": "Bob",
    "city": "Los Angeles"
  }],
  data2 = [{
    "name": "Vince",
    "city": "Tampa"
  }, {
    "name": "Yan",
    "city": "Austin"
  }];

var table1 = new Tabulator("#table1", {
    data: data1,
    layout: "fitColumns",
    movableRows: true,
    movableRowsConnectedTables: "#table2",
    movableRowsReceiver: "add",
    movableRowsSender: "delete",
    columns: [{
        title: "Name",
        field: "name"
      },
      {
        title: "City",
        field: "city"
      },
    ],
  }),

  table2 = new Tabulator("#table2", {
    data: data2,
    layout: "fitColumns",
    movableRows: true,
    movableRowsConnectedTables: "#table1",
    movableRowsReceiver: "add",
    movableRowsSender: "delete",
    columns: [{
        title: "Name",
        field: "name"
      },
      {
        title: "City",
        field: "city"
      },
    ],
  });
  
  // this is the funciton that is not working, i don't know what event looks like or contains, but hoping it has the row I'm dropping. To delete from table1 I was thinking of using tabulator's callbacks
  function drop(event){
    table1.deleteRow();
    table2.addRow();
    console.log(event); // this doesn't log anything, suggesting the funciton is not being called
  };

.tabulator{
margin: 30px;
}

.box{
background: #888;
color: #fff;
}

<script src="https://unpkg.com/tabulator-tables@4.5.3/dist/js/tabulator.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/tabulator-tables@4.5.3/dist/css/tabulator.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="table1" class="tabulator"></div>
<div id="table2" class="tabulator"></div>

<div id="div_to_drag_to_update_table2" ondrop="drop(event)">
<div class="box">
I would like to drag rows from table 1 here and they go in table 2
</div>
</div>

谢谢

Answer 1

从 Tabulator 4.7 开始，您现在可以将行拖到其他 DOM 元素上。

您将元素的选择器设置为 movableRowsConnectedElements 选项。然后使用 movableRowsElementDrop 回调来处理放置事件。

假设我们有以下要放置行的元素：

<ul id="drop-element"></ul>

然后我们定义 table，启用 movableRows 选项。

我们将元素的选择器传递给 movableRowsConnectedElements 选项

然后我们使用movableRowsElementDrop回调来处理drop，它传递了三个参数，事件，行的元素被拖放到和被拖放的行的行组件上。正是在这个回调中，您可以触发第二个 table.

上的操作

//Table to move rows from
var table = new Tabulator("#example-table", {{
    height:311,
    layout:"fitColumns",
    movableRows: true, //enable movable rows
    movableRowsConnectedElements: "#drop-element", //element to receive rows
    movableRowsElementDrop:function(e, element, row){
        //e - mouseup event object
        //element - node object for the element that the row was dropped onto
        //row - row component for the row that was moved

        //add a li to the drop element containing the name property from the row data
        var li = document.createElement("li");
        li.textContent = row.getData().name;
        element.appendChild(li);
    },
    data:tabledata,
    columns:[
        {title:"Name", field:"name"},
    ],
});

有关此新功能的完整详细信息，请参阅 Movable Rows Documentation

制表符将行拖到 div

Tabulator drag row to div

javascript

tabulator