如何轻松复制拖放卡片的 trello 样式？ （看板风格的应用程序）[关闭]
Posted
技术标签:
【中文标题】如何轻松复制拖放卡片的 trello 样式？ （看板风格的应用程序）[关闭]【英文标题】：How can I easily duplicate the trello style of drag and drop of cards? (Kanban style app) [closed] 【发布时间】：2014-02-08 08:38:13 【问题描述】：我正在构建一个网络应用程序，它使用与 trello 类似的拖放隐喻，通过将卡片从一个列表拖放到另一个列表来移动卡片。
我该怎么做？
【问题讨论】：
另一个可能的解决方案是React/Redux example on Github 【参考方案1】：以下示例使用 jQuery UI“可排序”和 CSS3 来做 Trello“倾斜”拖动效果。
你可以check it out here as a jsfiddle:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Sortable - Portlets</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
.tilt
transform: rotate(3deg);
-moz-transform: rotate(3deg);
-webkit-transform: rotate(3deg);
body
min-width: 520px;
.column
width: 170px;
float: left;
padding-bottom: 100px;
.portlet
margin: 0 1em 1em 0;
padding: 0.3em;
.portlet-header
padding: 0.2em 0.3em;
margin-bottom: 0.5em;
position: relative;
.portlet-toggle
position: absolute;
top: 50%;
right: 0;
margin-top: -8px;
.portlet-content
padding: 0.4em;
.portlet-placeholder
border: 1px dotted black;
margin: 0 1em 1em 0;
height: 50px;
</style>
<script>
$(onPageLoad);
function onPageLoad()
$( ".column" ).sortable(
connectWith: ".column",
handle: ".portlet-header",
cancel: ".portlet-toggle",
start: function (event, ui)
ui.item.addClass('tilt');
,
stop: function (event, ui)
ui.item.removeClass('tilt');
);
$( ".portlet" )
.addClass( "ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" )
.find( ".portlet-header" )
.addClass( "ui-widget-header ui-corner-all" )
.prepend( "<span class='ui-icon ui-icon-minusthick portlet-toggle'></span>");
$( ".portlet-toggle" ).click(function()
var icon = $( this );
icon.toggleClass( "ui-icon-minusthick ui-icon-plusthick" );
icon.closest( ".portlet" ).find( ".portlet-content" ).toggle();
);
</script>
</head>
<body>
<div class="column">
<div class="portlet">
<div class="portlet-header">Feeds</div>
<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class="portlet">
<div class="portlet-header">News</div>
<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
</div>
<div class="column">
<div class="portlet">
<div class="portlet-header">Shopping</div>
<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
</div>
<div class="column">
<div class="portlet">
<div class="portlet-header">Links</div>
<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class="portlet">
<div class="portlet-header">Images</div>
<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
</div>
</body>
</html>
【讨论】：
如果您已经在小提琴中提供了一个工作示例，为什么不尝试在代码中突出您意图的关键方面并减少“刚刚转储整个 html 页面”的外观和感觉你的答案：D 好吧...因为我没有写大部分...它实际上只是 jQuery UI 可排序演示 found here 的 90% 副本，还有一个额外的 javascript 事件来进行倾斜影响。现在当人们用谷歌搜索“trello card effect javascript”时，他们会得到这个示例，这比我得到的要多;-) 请添加解决方案的说明。【参考方案2】：基于Brad Parks-s answer right on this very page 构建的升级版本，具有更多缩进和令人敬畏的倾斜拖动方向效果，如this jsFiddle page 所示。
JavaScript 中的不同位遵循 cmets：
$( ".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);
【讨论】：
如何序列化最后的div标签/portlet，看看它属于哪个列表...？ 请在网站上提出一个新问题，并详细说明和概括一下您的目标是什么以上是关于如何轻松复制拖放卡片的 trello 样式？ （看板风格的应用程序）[关闭]的主要内容，如果未能解决你的问题，请参考以下文章
使用 jquery droppable，我如何复制 trello 将人物图像拖放到卡片上的行为，它捕捉到卡片的右下角？