jquery.dragsort实现分组拖拽排序效果代码
代码语言:html
所属分类:拖放
代码描述:jquery.dragsort实现分组拖拽排序效果代码
代码标签: jquery dragsort 分组 拖拽 排序
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/jquery-ui.css">
<style>
@font-face {
font-family: 'Allura';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/allura/v19/9oRPNYsQpS4zjuA_iwgT.ttf) format('truetype');
}
body {
}
/* TEXTURE's BOX */
.wrapper {
width: 800px;
margin: 50px auto;
padding: 0 40px;
position: center;
z-index: -15;
border: 3px dashed grey;
box-shadow: 0 0 0 15px #111111;
border-radius: 20px;
}
.dark_stripes {
}
h1 {
font-size: 16pt;
color: white;
}
h2 {
font-size: 13pt;
}
p,
dd {
}
dt {
color: grey;
}
a {
color: skyblue;
}
ul {
margin: 0px;
padding: 10px;
margin-left: 20px;
font-size: 3em;
border: 0px solid white;
}
#list1,
#list2 {
width: 350px;
list-style-type: none;
margin: 0px;
}
#list1 li,
#list2 li {
float: left;
padding: 5px;
width: 100px;
height: 100px;
}
#list1 div,
#list2 div {
width: 70px;
height: 70px;
background-color: #E0E0E0;
display: table-cell;
vertical-align: middle;
text-align: center;
border-radius: 50%;
border: 10px solid rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 0px 10px rgba(0, 0, 0, 0.5);
}
#list1 div:hover,
#list2 div:hover {
box-shadow: 0px 0px 0px 20px rgba(0, 0, 0, 0.5);
}
#list2 {
float: right;
}
#list2 div {
background: lightgreen ;
}
.placeHolder div {
background-color: white !important;
border: dotted 10px grey !important;
}
</style>
</head>
<body>
<div class="wrapper dark_stripes">
<h2>2D list with drag and drop between lists:</h2>
.........完整代码请登录后点击上方下载按钮下载查看
网友评论0