仿 trello php,使用jQuery-ui实现仿Trello风格的任务卡拖拉动画

CSS

语言：

CSSSCSS

确定

body {

background: #2c3e50;

}

* {

box-sizing: border-box;

}

.sortable__list {

list-style: none;

margin: 3em;

margin-left: -24px;

padding: 0;

text-align: center;

width: 100%;

-webkit-perspective: 500px;

perspective: 500px;

}

.sortable__item,

.ui-sortable-placeholder {

background: #ecf0f1;

border-radius: 5px;

cursor: pointer;

display: inline-block;

height: 5em;

margin: 1em;

position: relative;

vertical-align: top;

width: 15em;

}

.sortable__item h1,

.ui-sortable-placeholder h1 {

color: #2c3e50;

font-size: 1em;

margin: 1em 0;

}

.ui-sortable-placeholder {

background: #95a5a6;

box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.3);

}

.ui-sortable-helper {

box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);

cursor: move;

cursor: -webkit-grab;

cursor: -moz-grab;

-webkit-transform: rotateZ(4deg) scale(1.05);

transform: rotateZ(4deg) scale(1.05);

-webkit-transition: 0.2s -webkit-transform;

transition: 0.2s transform;

}