jquery实现图片拖拉拖拽排序分类效果代码
代码语言:html
所属分类:拖放
代码描述:jquery实现图片拖拉拖拽排序分类效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
.item_content ul{list-style:none;}
.item_content ul li{width:200px;height:160px;float:left;margin:10px }
.item_content{width:740px;height:auto; float:left;}
.item_content .item{width:200px;height:120px;line-height:120px;text-align:center;cursor:pointer;background:#ccc;}
.item_content .item img{width:200px;height:120px;border-radius:6px;}
.close{display:block;width:20px;height:20px;top:0;right:0;z-index:9999;position:absolute;text-align:center;font-size:16px;cursor:pointer;color:aliceblue;}
</style>
</head>
<body>
<div class="item_container">
<div class="item_content" id="imageChange">
<ul>
<li>
<div class="item"> <img src="//repo.bfw.wiki/bfwrepo/image/5e323253cf4d2.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90" width="150" height="150">
<span class="rmPicture close">×</span> </div>
</li>
<li>
<div class="item"> <img src="//repo.bfw.wiki/bfwrepo/image/5e5314d9c6386.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90" width="150" height="150">
<span class="rmPicture close">×</span> </div>
</li>
<li>
.........完整代码请登录后点击上方下载按钮下载查看
















网友评论0