以下是 jQuery带删除按钮拖动排序js代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>jQuery带删除按钮拖动排序</title>
<!--<link href='https://fonts.googleapis.com/css?family=Droid+Sans|Droid+Serif' rel='stylesheet' type='text/css'>-->
<link href='css/jquery.gridly.css' rel='stylesheet' type='text/css'>
<link href='css/sample.css' rel='stylesheet' type='text/css'>
<script src='js/jquery.js' type='text/javascript'></script>
<script src='js/jquery-ui.js' type='text/javascript'></script>
<script src='js/jquery.gridly.js' type='text/javascript'></script>
<script src='js/sample.js' type='text/javascript'></script>
<script src='js/rainbow.js' type='text/javascript'></script>
</meta>
</head>
<body>
<div class='content'>
<h2>Example</h2>
<section class='example'>
<div class='gridly'>
<div class='brick small'>
<a class='delete' href='#'>×</a>
</div>
<div class='brick small'>
<a class='delete' href='#'>×</a>
</div>
<div class='brick small'>
<a class='delete' href='#'>×</a>
</div>
<div class='brick small'>
<a class='delete' href='#'>×</a>
</div>
<div class='brick small'>
<a class='delete' href='#'>×</a>
</div>
<div class='brick small'>
<a class='delete' href='#'>×</a>
</div>
<div class='brick small'>
<a class='delete' href='#'>×</a>
</div>
<div class='brick small'>
<a class='delete' href='#'>×</a>
</div>
<div class='brick small'>
<a class='delete' href='#'>×</a>
</div>
<div class='brick small'>
<a class='delete' href='#'>×</a>
</div>
<div class='brick small'>
<a class='delete' href='#'>×</a>
</div>
<div class='brick small'>
<a class='delete' href='#'>×</a>
</div>
<div class='brick small'>
<a class='delete' href='#'>×</a>
</div>
<div class='brick small'>
<a class='delete' href='#'>×</a>
</div>
<div class='brick small'>
<a class='delete' href='#'>×</a>
</div>
<div class='brick small'>
<a class='delete' href='#'>×</a>
</div>
<div class='brick small'>
<a class='delete' href='#'>×</a>
</div>
<div class='brick small'>
<a class='delete' href='#'>×</a>
</div>
<div class='brick small'>
<a class='delete' href='#'>×</a>
</div>
<div class='brick small'>
<a class='delete' href='#'>×</a>
</div>
</div>
</section>
</div>
</body>
</html>
JS代码(sample.js):
// Generated by CoffeeScript 1.6.3(function(){
$(function(){
$('.gridly').gridly();
$('.gridly').gridly('draggable');
$('.gridly .brick').click(function(event){
var size;
event.preventDefault();
event.stopPropagation();
$(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');
}
);
return $('.gridly .delete').click(function(event){
event.preventDefault();
event.stopPropagation();
$(this).closest('.brick').remove();
return $('.gridly').gridly('layout');
}
);
}
);
}
).call(this);
CSS代码(sample.css):
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
h1,h2,h3,h4,h5,h6{color:#444444;font-family:"Droid Sans",sans-serif;font-weight:normal;}
p,textarea,input{color:#888888;font-family:"Droid Serif",serif;font-weight:normal;}
code{color:#888888;font-family:"Consolas","Monaco",monospace;font-weight:normal;}
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;}
pre .support.tag{color:#000088;}
pre .support.attribute{color:#880000;}
pre .string.value{color:#008800;}
.example{position:relative;}
.example .brick{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:nth-child(1){background:#1abc9c;}
.example .brick:nth-child(2){background:#16a085;}
.example .brick:nth-child(3){background:#2ecc71;}
.example .brick:nth-child(4){background:#27ae60;}
.example .brick:nth-child(5){background:#3498db;}
.example .brick:nth-child(6){background:#2980b9;}
.example .brick:nth-child(7){background:#9b59b6;}
.example .brick:nth-child(8){background:#8e44ad;}
.example .brick:nth-child(9){background:#34495e;}
.example .brick:nth-child(10){background:#2c3e50;}
.example .brick:nth-child(11){background:#f1c40f;}
.example .brick:nth-child(12){background:#f39c12;}
.example .brick:nth-child(13){background:#e67e22;}
.example .brick:nth-child(14){background:#d35400;}
.example .brick:nth-child(15){background:#e74c3c;}
.example .brick:nth-child(16){background:#c0392b;}
.example .brick:nth-child(17){background:#ecf0f1;}
.example .brick:nth-child(18){background:#bdc3c7;}
.example .brick:nth-child(19){background:#95a5a6;}
.example .brick:nth-child(20){background:#7f8c8d;}
分享到QQ
分享到微博
微信扫一扫
