jquery.dragsort实现分组拖拽排序效果代码-html代码-BFW代码库

jquery.dragsort实现分组拖拽排序效果代码

代码语言：html

所属分类：拖放

代码描述：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>
        <div>
            <ul id="list2">
                <li>
                    <div>春</div>
                </li>
                <li>
                    <div>香</div>
                </li>
                <li>
                    <div>袭</div>
                </li>
                <li>
                    <div>用</div>
                </li>
                <li>
                    <div>要</div>
                </li>
            </ul>

            <ul id="list1">
                <li>
                    <div>求</div>
                </li>
                <li>
                    <div>苛</div>
                </li>
                <li>
                    <div>刻</div>
                </li>
                <li>
                    <div>的</div>
                </li>
                <li>
                    <div>七</div>
                </li>
            </ul>
        </div>
        <!-- save sort order here which can be retrieved on server on postbac.........完整代码请登录后点击上方下载按钮下载查看