在列之间移动可拖动项目并保存位置

Question

我有一堆用灰色框表示的用户。我想将这些用户从一列移到另一列（浅蓝色）。每列代表用户的不同状态。

可拖动 (https://github.com/Shopify/draggable) 功能已经在工作，我可以得到源位置和商品编号那被拖了。 但我不知道如何获取目标列的信息。

到目前为止，这是我的代码：

var containers = document.querySelectorAll(".draggable-zone");

    if (containers.length === 0) {
        return false;
    }

    var swappable = new Sortable.default(containers, {
        draggable: ".draggable",
        handle: ".draggable .draggable-handle",
        mirror: {
            //appendTo: selector,
            constrainDimensions: true
        }
    });

    swappable.on('drag:start', (event) => {
        // works
    });

    swappable.on('drag:stop', (event) => {
        console.log(event);
        console.log(event.source.id); // return user id
        console.log(event.sourceContainer.id); // return source column id (status)
    });

<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.13/lib/draggable.bundle.js"></script>
<div class="content d-flex flex-column flex-column-fluid" id="">
    <div class="container-fluid" id="">
        <div class="col-xs-12 no-padding s-row" style="display: flex;overflow-x: auto;">
            <div id="col_1" class="draggable-zone col-xs-12 col-md-3 p-2 m-2" style="background-color: lightblue">
                <h3>Col 1</h3>
                <!-- start::draggable user item -->
                <div id="user_1" class="draggable text-white rounded p-3 m-1 mb-3 h-100px" style="background-color: lightslategray">
                    User 1
                    <div class="draggable-handle">X</div>
                </div>
                <!-- end::draggable user item -->
                <!-- start::draggable user item -->
                <div id="user_2" class="draggable text-white rounded p-3 m-1 mb-3 h-100px" style="background-color: lightslategray">
                    User 2
                    <div class="draggable-handle">X</div>
                </div>
                <!-- end::draggable user item -->
                <!-- start::draggable user item -->
                <div id="user_3" class="draggable text-white rounded p-3 m-1 mb-3 h-100px" style="background-color: lightslategray">
                    User 3
                    <div class="draggable-handle">X</div>
                </div>
                <!-- end::draggable user item -->
                <!-- start::draggable user item -->
                <div id="user_4" class="draggable text-white rounded p-3 m-1 mb-3 h-100px" style="background-color: lightslategray">
                    User 4
                    <div class="draggable-handle">X</div>
                </div>
                <!-- end::draggable user item -->
            </div>
            <!-- end::col -->
            <!-- start::col -->
            <div id="col_2" class="draggable-zone col-xs-12 col-md-3  p-2 m-2" style="background-color: lightblue">
                <h3>Col 2</h3>
                <!-- start::draggable user item -->
                <div id="user_5" class="draggable text-white rounded p-3 m-1 mb-3 h-100px" style="background-color: lightslategray">
                    User 5
                    <div class="draggable-handle">X</div>
                </div>
                <!-- end::draggable user item -->
                <!-- start::draggable user item -->
                <div id="user_6" class="draggable text-white rounded p-3 m-1 mb-3 h-100px" style="background-color: lightslategray">
                    User 6
                    <div class="draggable-handle">X</div>
                </div>
                <!-- end::draggable user item -->
                <!-- start::draggable user item -->
                <div id="user_7" class="draggable text-white rounded p-3 m-1 mb-3 h-100px" style="background-color: lightslategray">
                    User 7
                    <div class="draggable-handle">X</div>
                </div>
                <!-- end::draggable user item -->
            </div>
            <!-- end::col -->
            <!-- start::col -->
            <div id="col_3" class="draggable-zone col-xs-12 col-md-3  p-2 m-2" style="background-color: lightblue">
                <h3>Col 3</h3>
            </div>
            <!-- end::col -->
            <!-- start::col -->
            <div id="col_4" class="draggable-zone col-xs-12 col-md-3  p-2 m-2" style="background-color: lightblue">
                <h3>Col 4</h3>
            </div>
            <!-- end::col -->
            <!-- start::col -->
            <div id="col_5" class="draggable-zone col-xs-12 col-md-3  p-2 m-2" style="background-color: lightblue">
                <h3>Col 5</h3>
                <!-- start::draggable user item -->
                <div id="user_8" class="draggable text-white rounded p-3 mb-3 m-1 h-100px" style="background-color: lightslategray">
                    User 8
                    <div class="draggable-handle">X</div>
                </div>
                <!-- end::draggable user item -->
                <!-- start::draggable user item -->
                <div id="user_9" class="draggable text-white rounded p-3 mb-3 m-1 h-100px" style="background-color: lightslategray">
                    User 9
                    <div class="draggable-handle">X</div>
                </div>
                <!-- end::draggable user item -->
            </div>
            <!-- end::col -->
            <!-- start::col -->
            <div id="col_6" class="draggable-zone col-xs-12 col-md-3  p-2 m-2" style="background-color: lightblue">
                <h3>Col 6</h3>
            </div>
            <!-- end::col -->
        </div>
    </div>
</div>

此外，我还想在每一列中保存用户的顺序。

可能有一些可以帮助我。

任何帮助表示赞赏。

此致

蒂姆

Answer 1

解决方案

基于draggable@1.0.0-beta.8

将 Javascript 数据绑定到 DOM

要将内部数据绑定到 DOM 元素，请使用 data attribute。

// data-column exposes the bound data of given element
<div class="column" data-column="1" />

可以使用此数据属性访问列数据。

动态保存和重建状态

尝试使用给定数据构建 DOM 结构，而不是使用静态 HTML 代码。以便以后可以使用修改后的数据重建项目状态。

<div id="root">
  <div class="col" data-column="0">col0</div>
  <div class="col" data-column="1">col1</div>
  <div class="col" data-column="2">col2</div>
</div>

// use data to dynamically reconstruct the items
const items = [
  { column: 0, label: "aaa", index: "a" },
  { column: 1, label: "bbb", index: "b" },
  { column: 1, label: "ccc", index: "c" }
];

function init() {
  const root = document.getElementById("root");
  const columns = document.querySelectorAll("#root .col");
  const divItems = items.map((item) => {
    const divItem = document.createElement("div");
    divItem.setAttribute("class", "draggable item");
    divItem.setAttribute("data-index", item.index);
    divItem.innerHTML = item.label;
}
init();

从 Draggable.Sortable 事件中获取列数据

Draggable 暴露了所有必要的 DOM 元素。利用 data 属性获取列数据。

const sortable = new Sortable(columns, { draggable: ".draggable" });
  sortable.on("sortable:stop", (ev) => {
    const newCol = ev.data.newContainer.getAttribute("data-column");
    const oldCol = ev.data.oldContainer.getAttribute("data-column");
    const index = ev.data.dragEvent.data.source.getAttribute("data-index");
    // mutate items data with data acquired from DOM attribute
    console.log({ index, newCol, oldCol });
    // i.g. var idx = items.findIndex(i => i.index === index); items[idx].column = newCol;
  });

演示可在codepen 获得。检查浏览器控制台。

Answer 2

可以为每个元素设置对应的data-col，在event.source.setdata中可以看到，渲染时设置即可