jquery Sortable实现表格增加拖拽排序和删除效果代码-html代码-BFW代码库

jquery Sortable实现表格增加拖拽排序和删除效果代码

代码语言：html

所属分类：表格

代码描述：jquery Sortable实现表格增加拖拽排序和删除效果代码，点击下面增加可增加表格行。

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">



    <style>
        body {
          font-size: 14px;
        }
        
        .recipe { 
          padding: 1em;
        }
        .recipe__title {
          margin-top: 0;
        }
        .recipe__info {
          vertical-align: top;
          text-align: right;
          padding: 0 1em 0 0;
          margin: 0 1.3em 0 0;
          font-weight: bold;
          color: #454545;
          border-right: 1px dotted #EEE;
          width: 300px;
          float: left;
        }
        .recipe__ingredients {
          float: left;
        }
        .recipe-table {
          position: relative;
          padding:  1em;
          border: 1px solid #DDD;
          box-shadow: 0 15px 10px -10px rgba(31, 31, 31, 0.5);
          z-index: 10;
        }
        
        .recipe-table__cell {
          vertical-align: top;
          padding: 3px 5px;
        }
        .recipe__text-field {
          margin:0;
          padding: .45em 0.92em;
          font-size: 1em;
          line-height: 1.4;
          color: #555555;
          background-color: #FFF;
          background-image: none;
          border: 1px solid #CCC;
          border-left:1px solid #CCC;
        }
        .recipe-table__add-row {
          margin-top: 0;
          position: relative;
          border-top: 1px solid #EEE;
          z-index: 8;
  .........完整代码请登录后点击上方下载按钮下载查看