jquery-ui结合bootstrap实现拖拽排序删除效果代码-html代码-BFW代码库

jquery-ui结合bootstrap实现拖拽排序删除效果代码

代码语言：html

所属分类：拖放

代码描述：jquery-ui结合bootstrap实现拖拽排序删除效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.3.3.4.css">

    <style>
        #modules {
          padding: 20px;
          background: #eee;
          margin-bottom: 20px;
          z-index: 1;
          border-radius: 10px;
        }
        
        #dropzone {
          padding: 20px;
          background: #eee;
          min-height: 100px;
          margin-bottom: 20px;
          z-index: 0;
          border-radius: 10px;
        }
        
        .active {
          outline: 1px solid red;
        }
        
        .hover {
          outline: 1px solid blue;
        }
        
        .drop-item {
          cursor: pointer;
          margin-bottom: 10px;
          background-color: rgb(255, 255, 255);
          padding: 5px 10px;
          border-radisu: 3px;
          border: 1px solid rgb(204, 204, 204);
          position: relative;
        }
        
        .drop-item .remove {
          position: absolute;
          top: 4px;
          right: 4px;
        }
    </style>



</head>

<body>
    <div class="container">
        <h1>Drag'n Drop Demo <small>jQuery UI and Bootstrap</small></h1>
        <form role="form">
            <div class="form-group">
                <input class="form-control" type="text" name="name" placeholder="Title" />
            </div>
            <details>
                <div class="form-group">
                    <input class="form-control" type="text" name="blah" placeholder="Additional details here" />
                </div>
            </details>
        </form>


        <div class="row">
            <div class="col-sm-6">
                <div id="modules">
                    <p class="drag"><a class="btn btn-default">Text</a></p>

                    <p class="drag"><a .........完整代码请登录后点击上方下载按钮下载查看