Trello 拖放效果

Posted

技术标签:

【中文标题】Trello 拖放效果【英文标题】:Trello drag and drop effect 【发布时间】:2012-07-03 06:49:16 【问题描述】:

有谁知道 Trello 是如何制作这些漂亮的拖放效果的,其中选定的卡片与文本可见略微倾斜?

我喜欢认为我查看了网络上的任何网站并大致了解所有内容是如何完成的,但我从未见过像这样无缝完成的效果。它是在服务器上动态设置样式并在拖动开始时加载的预渲染图像吗?

我知道的非常琐碎的问题!

【问题讨论】:

【参考方案1】:

Trello 只是在 ui-sortable-helper 上使用 CSS rotate transformation

.list-card.ui-sortable-helper 
   transform: rotate(3deg);
   -moz-transform: rotate(3deg);
   -webkit-transform: rotate(3deg);

【讨论】:

谢谢 - 我刚开始看 CSS3,不知道它可以旋转。

以上是关于Trello 拖放效果的主要内容,如果未能解决你的问题,请参考以下文章

如何轻松复制拖放卡片的 trello 样式? (看板风格的应用程序)[关闭]

使用cdkDropList时元素样式不适用(Angluar cdk拖放)

如何在rails中添加拖放功能[关闭]

使用 cdkDropList 时元素样式不适用(角度 cdk 拖放)

HTML5 拖放API与Vue.js实战

颤动:在多个列表或列之间进行排序,拖放