dragslot实现列表项拖动排序效果代码-html代码-BFW代码库

dragslot实现列表项拖动排序效果代码

代码语言：html

所属分类：拖放

代码描述：dragslot实现列表项拖动排序效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/dragslot.css">
    <style>
        body {
            font-family: 'Microsoft Yahei';
            margin: 0;

        }
        ul,li {
            list-style: none;
        }
        h1 {
            font-size: 40px;
        }
        dd {
            font-style: italic;
            color: #666;
        }
        .clearfix:after {
            content: ".";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
        .container {
            width: 80%;
            min-height: 500px;
            background: #fff;
            margin: 0 auto;

        }

        .demo-header {
            margin-bottom: 80px;
            height: 350px;
            color: #fff;
            background-color: #0abebf;
            padding: 10px 150px;
        }
        #download {
            background-color: #b7d06c;
            color: #fff;
            height: 20px;
            display: block;
            width: 180px;
            text-align: center;
            padding: 10px;
            box-shadow: 1px 1px 5px #ccc;
            border-radius: 3px;
            text-decoration: none;
        }
        #download:hover {
            text-decoration: none;
            background-color: #9dc509;
        }
        .demo {
            padding-bottom: 80px;
        }
        li.slot-item {
            padding: 1px 10px;
            border: 1px solid #18a0b7;
            border-left: 5px solid #4bcce2;
            background-color: #fff;

        }
        li.slot-item:not(:last-child) {
            border-bottom-color: transparent;
        }

        .item-title {
            font-size: 20px;
            line-height: 48px;
        }
        .slot-handler p {
            margin: 0;
            font-size: 14px;
        }
        .avator {
            width: 20%;
            float: left;
        }
        .avator>img {
            width: 50px;
            margin-top: 20px;
        }
        .content {
            width: 80%;
            float: left;
            line-height: 18px;
        }
        .border-yellow {
            border: 2px solid #ecdb50;
        }
        .border-red {
            border: 2px solid #ea7c7c;
        }
        .border-green {
            border: 2px solid #61d486;
        }
        .bg-yellow {
            background-color: #ecdb50;
        }
        .bg-red {
            background-color: #ea7c7c;
        }
        .bg-green {
            background-color: #61d486;
        }
        .slot-title {
            float: left;
            width: 30%;
            color: #fff;
            padding: 10px 1px;
            min-height: 30px;
            font-size: 20px
        }
        .slot-title:not(:nth-child(3)) {
            margin-right: 3%;
        }

        .code {
            min-height: 500px;

            background-color: #b7d06c;
            padding: 20px 150px;
        }


    </style>
</head>
<body>

    <section class="demo clearfix">
        <div id="dragslot" class="container">

            <div class="slot-title bg-red border-red">
                Todo
            </div>
            <div class="slot-title bg-yellow border-yellow">
                Doing
            </div>
            <div class="slot-title bg-green border-green">
                Done
            </div>


            <div class="slot border-red">
                <ul class="slot-list">
                    <li class="slot-item" id="a"><div class="slot-handler clearfix">
                        <div class="avator">
                            <img src="//repo.bfw.wiki/bfwrepo/image/5fc18ed75be96.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90" />
                        </div>
                        <div class="content">
                            <div class="item-title">
                                UI design
                            </div>

                            <p>
                                finish ui design of dashboard page
                            </p>
                        </div>

                    </div>
                    </li>
                    <li class="slot-item"><div class="slot-handler">
                        <div class="slot-handler clearfix">
                            <div class="avator">
                                <img src="//repo.bfw.wiki/bfwrepo/image/5fc18ed75be96.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90" />
                            </div>
                            <div class="content">
                                <div class="item-title">
          .........完整代码请登录后点击上方下载按钮下载查看