如何获取Shopify Draggable目标列信息并保存列内用户排序？

灰色方块代表用户，浅蓝色列代表用户的不同状态，需要实现用户在列间的拖拽功能。

目前已基于Shopify Draggable实现拖拽功能，可获取被拖拽项的源位置和item id，但无法获取目标列的信息，同时还需要保存每列内用户的排序。

当前代码 #

JavaScript 代码 #

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: {
        constrainDimensions: true
    }
});

swappable.on('drag:start', (event) => {
    // 此处逻辑正常工作
});

swappable.on('drag:stop', (event) => {
    console.log(event);
    console.log(event.source.id); // 返回用户ID
    console.log(event.sourceContainer.id); // 返回源列ID（状态）
});

HTML 代码 #

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

解决方案 #

1. 获取目标列信息 #

Shopify Draggable的Sortable组件提供了sortable:stop事件，该事件参数包含newContainer属性，对应拖拽后的目标列容器。只需将监听事件从drag:stop改为sortable:stop，即可获取目标列ID：

swappable.on('sortable:stop', (event) => {
    console.log('用户ID:', event.source.id);
    console.log('源列ID:', event.sourceContainer.id);
    console.log('目标列ID:', event.newContainer.id);
});

2. 保存每列内的用户排序 #

每次拖拽结束后，遍历所有列容器，收集每列下用户的ID顺序，可将数据存储到本地或发送到后端。示例代码如下：

// 定义保存排序的函数
function saveColumnSort() {
    const sortData = {};
    // 遍历所有列
    containers.forEach(container => {
        const columnId = container.id;
        // 获取列下所有用户项的ID
        const userIds = Array.from(container.querySelectorAll('.draggable')).map(item => item.id);
        sortData[columnId] = userIds;
    });
    // 保存到localStorage（也可改为发送到后端接口）
    localStorage.setItem('userColumnSort', JSON.stringify(sortData));
    console.log('已保存排序:', sortData);
}

// 在拖拽结束时调用保存函数
swappable.on('sortable:stop', (event) => {
    // 获取目标列等信息
    console.log('用户ID:', event.source.id);
    console.log('源列ID:', event.sourceContainer.id);
    console.log('目标列ID:', event.newContainer.id);
    // 保存排序
    saveColumnSort();
});

如果需要在页面加载时恢复之前的排序，可添加以下代码：

// 页面加载时恢复排序
window.addEventListener('load', () => {
    const savedSort = localStorage.getItem('userColumnSort');
    if (!savedSort) return;
    
    const sortData = JSON.parse(savedSort);
    // 遍历每列，恢复用户顺序
    Object.keys(sortData).forEach(columnId => {
        const container = document.getElementById(columnId);
        if (!container) return;
        
        const userIds = sortData[columnId];
        userIds.forEach(userId => {
            const userItem = document.getElementById(userId);
            if (userItem) {
                container.appendChild(userItem);
            }
        });
    });
});

内容的提问来源于stack exchange，提问作者Tim