我如何轻松地复制卡片拖放的trello风格？（看板风格的应用程序）

Brad Parks 发表于 Dev

布莱德公园

我正在构建一个Web应用程序，该应用程序使用了trello通过将卡片从一个列表拖放到另一个列表来移动卡片的类似的拖放比喻。

我怎样才能做到这一点？

贾克·库特（JaakKütt）

在此页面上，基于Brad Parks的答案构建的升级版本恰好在此jsFiddle页面上展示，具有更大的缩进和令人敬畏的向拖拽方向倾斜效果。

JavaScript中的不同位遵循以下注释：

$( ".column" ).sortable({
    connectWith: ".column",
    handle: ".portlet-header",
    cancel: ".portlet-toggle",
    start: function (event, ui) {
        ui.item.addClass('tilt');
        // Start monitoring tilt direction
        tilt_direction(ui.item);
    },
    stop: function (event, ui) {
        ui.item.removeClass("tilt");
        // Unbind temporary handlers and excess data
        $("html").unbind('mousemove', ui.item.data("move_handler"));
        ui.item.removeData("move_handler");
    }
});

// Monitor tilt direction and switch between classes accordingly
function tilt_direction(item) {
    var left_pos = item.position().left,
        move_handler = function (e) {
            if (e.pageX >= left_pos) {
                item.addClass("right");
                item.removeClass("left");
            } else {
                item.addClass("left");
                item.removeClass("right");
            }
            left_pos = e.pageX;
        };
    $("html").bind("mousemove", move_handler);
    item.data("move_handler", move_handler);
}

不同倾斜度的CSS修改

.tilt.right {
    transform: rotate(3deg);
    -moz-transform: rotate(3deg);
    -webkit-transform: rotate(3deg);
}
.tilt.left {
    transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    -webkit-transform: rotate(-3deg);
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。