jquery实现事项div样式的平滑拖拽特效

1、新建html文档。

3、书写css代码。* { -we bkit-box-sizing: border-box; -moz-芟鲠阻缒box-sizing: border-box; box-sizing: border-box; }body, html, p, h1, h2, h3, h4, h5, h6 { font-family: "Lato", "Helvetica", serif; font-weight: normal; }.gridly, .gridly > :not(.dragging) { -we bkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; }.gridly .dragging { z-index: 800; }code { font-family: "Consolas", "Monaco", monospace; font-weight: normal; }body, html, p, code { color: #888888; }h1, h2, h3, h4, h5, h6 { color: #444444; }pre { overflow: scroll; background: #eeeeee; padding: 10px; }.content { width: 980px; margin: 80px auto; }.formats .format { display: inline-block; }.zip { background: url("../images/zip.png"); display: block; width: 128px; height: 128px; }.tar { background: url("../images/tar.png"); display: block; width: 128px; height: 128px; }.fork { position: absolute; top: 0; left: 0; border: 0; }.button { display: block; padding: 20px; width: 200px; color: white; background: #888888; margin: 20px 0; text-align: center; text-decoration: none; border-radius: 4px; }pre .support.tag { color: #000088; }pre .support.attribute { color: #880000; }pre .string.value { color: #008800; }.example { position: relative; }.example .brick { opacity: 1; cursor: pointer; position: relative; }.example .brick .delete { display: block; color: white; background: rgba(255, 255, 255, 0.2); width: 40px; height: 40px; top: 0; right: 0; position: absolute; text-align: center; line-height: 40px; }.example .brick.small { width: 140px; height: 140px; }.example .brick.large { width: 300px; height: 300px; }.example .brick.dragging { opacity: 0.8; }.example .brick:nth-child(20n + 1) { background: #1abc9c; }.example .brick:nth-child(20n + 2) { background: #16a085; }.example .brick:nth-child(20n + 3) { background: #2ecc71; }.example .brick:nth-child(20n + 4) { background: #27ae60; }.example .brick:nth-child(20n + 5) { background: #3498db; }.example .brick:nth-child(20n + 6) { background: #2980b9; }.example .brick:nth-child(20n + 7) { background: #9b59b6; }.example .brick:nth-child(20n + 8) { background: #8e44ad; }.example .brick:nth-child(20n + 9) { background: #34495e; }.example .brick:nth-child(20n + 10) { background: #2c3e50; }.example .brick:nth-child(20n + 11) { background: #f1c40f; }.example .brick:nth-child(20n + 12) { background: #f39c12; }.example .brick:nth-child(20n + 13) { background: #e67e22; }.example .brick:nth-child(20n + 14) { background: #d35400; }.example .brick:nth-child(20n + 15) { background: #e74c3c; }.example .brick:nth-child(20n + 16) { background: #c0392b; }.example .brick:nth-child(20n + 17) { background: #ecf0f1; }.example .brick:nth-child(20n + 18) { background: #bdc3c7; }.example .brick:nth-child(20n + 19) { background: #95a5a6; }.example .brick:nth-child(20n + 20) { background: #7f8c8d; }

5、代码整体结构。