Sortable实现支持移动端手机端拖拽排序效果代码-html代码-BFW代码库

代码语言：html

所属分类：拖放

代码描述：Sortable实现支持移动端手机端拖拽排序效果代码

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

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8" />
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/reset.min.css">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <style>

        .page {
            padding-top: .8rem;
            box-sizing: border-box;
        }

        .page header {
            position: fixed;
            top: 0;
            height: 0.8rem;
            width: 100%;
            line-height: .8rem;
            color: #333;
            background: #fff;
            border-bottom: 0.02rem solid #ededed;
            text-align: center;
            font-size: .34rem;
            z-index: 10;
        }

        .page .content .list_wrap {
            overflow-x: hidden;
            max-width: 100%;
            position: relative;
        }

        .page .content .list_con {
            border-top: 0.02rem solid #f1e8e8;
            padding: 0.4rem 0;
            background-color: #FFFFFF;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: relative;
        }

        .page .content .list_con .l_top {
            display: flex;
            justify-content: left;
        }

        .page .content .list_con .l_top .title {
            text-align: left;
            padding-left: 0.2rem;
            width: .61rem;
            height: .81rem;
            color: #000000;
            line-height: .6rem;
            font-weight: bold;
        }

        .page .content .list_con .l_top .list_table {
            text-align: left;
            margin-left: .2rem;
        }

        .page .content .list_con .l_top .list_table th {
            height: .4rem;
            font-size: .32rem;
            font-weight: bold;
        }

        .page .content .list_con .l_top .list_table td {
            padding: 0 0.19rem 0 0.2rem;
            height: .4rem;
            font-size: .24rem;
        }

        .page .content .list_con .l_top .list_table .tf32red {
            padding: 0 0.19rem 0 0;
            font-size: .32rem;
            font-weight: bold;
            color: #fd7470;
            border-right: 0.02rem solid #f1e8e8;
        }

        .page .content .list_con .r_top img {
            display: block;
            margin-right: .3rem;
            width: .5rem;
            height: .54rem;
        }

        .page .content .list_con:last-child {
            margin-bottom: 0.3rem;
        }
        .sortable-chosen {
            box-shadow: 1px 16px 16px -8px rgba(0,0,0,0.27);
            -webkit-box-shadow: 1px 16px 16px -8px rgba(0,0,0,0.27);
            -moz-box-shadow: 1px 16px 16px -8px rgba(0,0,0,0.27);
            border-bottom: 2px solid hsla(0,0%,0%,1.00);
        }
    </style>

</head>

<body>
    <div class="page">
        <header class="header">
            拖拽
        </header>
        <div class="content">
            <div class="list_wrap" id="list_wrap">
                <div class="list_con">
                    <div class="l_top">
                        <div class="title">
                            A
                        </div>
                        <table class="list_table">
                            <tr>
                                <th colspan="3">标题标题</th>
                            </tr>
                            <tr>
                                <td class="tf32red">内容</td>
                                <td rowspan="2">内容1:<span>num</span></td>
                                <td rowspan="2">内容2:<span>是否</span> </td>
                            </tr>
                            <tr>
                                <td style="padding:0 0.19rem 0 0;">内容3</td>
                            </tr>
                        </table>
                    </div>
                    <div class="r_top">
                        <img class="iconshanchu" src="//repo.bfw.wiki/bfwrepo/icon/60c937ae7c900.png" alt="删除">
                    </div>
                </div>
                <div class="list_con">
                    <div class="l_top">
                        <div class="title">
                            B
                        </div>
                        <table class="list_table">
                            <tr>
                                <th colspan="3">标题标题</th>
                            </tr>
                            <tr>
                                <td class="tf32red">内容</td>
                                <td rowspan="2">内容1:<span>num</span></td>
                                <td rowspan="2">内容2:<span>是否</span> </td>
                            </tr>
                            <tr>
                                <td style="padding:0 0.19rem 0 0;">内容3</td>
                            </tr>
                        </table>
                    </div>
                    <div class="r_top">
                        <img class="iconshanchu" src="//repo.bfw.wiki/bfwrepo/icon/60c937ae7c900.png" alt="删除">
                    </div>
                </div>
                <div class="list_con">
                    <div class="l_top">
                        <div class="title">
                            C
                        </div>
                        <table class="list_table">
                            <tr>
                                <th colspan="3">标题标题</th>
                            </tr>
                            <tr>
                                <td class="tf32red">内容</td>
                                <td rowspan="2">内容1:<span>num</span></td>
                                <td rowspan="2">内容2:<span>是否</span> </td>
                            </tr>
                            <tr>
                                <td style="padding:0 0.19rem.........完整代码请登录后点击上方下载按钮下载查看