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

2025-11-04 09:18:03

1、新建html文档。

2、书写hmtl代码。

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</section>

</div>

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

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; }

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

4、书写并添加js代码。

(function() {

$(function() {

var brick;

brick = "<div class='brick small'><div class='delete'>×</div></div>";

$(document).on("click", ".gridly .brick", function(event) {

var $this, size;

event.preventDefault();

event.stopPropagation();

$this = $(this);

$this.toggleClass('small');

$this.toggleClass('large');

if ($this.hasClass('small')) {

size = 140;

}

if ($this.hasClass('large')) {

size = 300;

}

$this.data('width', size);

$this.data('height', size);

return $('.gridly').gridly('layout');

});

$(document).on("click", ".gridly .delete", function(event) {

var $this;

event.preventDefault();

event.stopPropagation();

$this = $(this);

$this.closest('.brick').remove();

return $('.gridly').gridly('layout');

});

$(document).on("click", ".add", function(event) {

event.preventDefault();

event.stopPropagation();

$('.gridly').append(brick);

return $('.gridly').gridly();

});

return $('.gridly').gridly();

});

}).call(this);

</script>

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

5、代码整体结构。

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

6、查看效果。

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

声明：本网站引用、摘录或转载内容仅供网站访问者交流或参考，不代表本站立场，如存在版权或非法内容，请联系站长删除，联系邮箱：site.kefu@qq.com。