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