jQuery手机端列表拖拽删除功能特效代码下载


jQuery手机端列表拖拽删除功能特效代码下载
jQuery手机端列表拖拽删除功能特效代码下载以及手机端列表拖拽、删除功能等js/jquery网页特效代码下载。

1. 引入CSS

<link rel="stylesheet" type="text/css" href="./css/reset.css" />
<link rel="stylesheet" type="text/css" href="./css/index.css" />

2. 引入JS

<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript" src="./js/rem.js"></script>
<script type="text/javascript" src="./js/Sortable.min.js"></script>

3. HTML代码

  <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="./img/shanchu.png" alt="删除">
            <img class="icondaohang handle" src="./img/daohang.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="./img/shanchu.png" alt="删除">
            <img class="icondaohang handle" src="./img/daohang.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 0 0;">内容3</td>
              </tr>
            </table>
          </div>
          <div class="r_top">
            <img class="iconshanchu" src="./img/shanchu.png" alt="删除">
            <img class="icondaohang handle" src="./img/daohang.png" alt="导航">
          </div>
        </div>
        <div class="list_con">
          <div class="l_top">
            <div class="title">D</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="./img/shanchu.png" alt="删除">
            <img class="icondaohang handle" src="./img/daohang.png" alt="导航">
          </div>
        </div>
        <div class="list_con">
          <div class="l_top">
            <div class="title">E</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="./img/shanchu.png" alt="删除">
            <img class="icondaohang handle" src="./img/daohang.png" alt="导航">
          </div>
        </div>
        <div class="list_con">
          <div class="l_top">
            <div class="title">F</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="./img/shanchu.png" alt="删除">
            <img class="icondaohang handle" src="./img/daohang.png" alt="导航">
          </div>
        </div>
        <div class="list_con">
          <div class="l_top">
            <div class="title">G</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="./img/shanchu.png" alt="删除">
            <img class="icondaohang handle" src="./img/daohang.png" alt="导航">
          </div>
        </div>
      </div>
    </div>
  </div>

相关推荐

发表评论

相关文章