jquery-ui实现敏捷开发中工作任务拖拽分配效果代码-html代码-BFW代码库

jquery-ui实现敏捷开发中工作任务拖拽分配效果代码

代码语言：html

所属分类：拖放

代码描述：jquery-ui实现敏捷开发中工作任务拖拽分配效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/jquery-ui-1.11.0.min.css">

    <style>
        body {
         	font-family:helvetica, arial;
        	 font-size:12px
          }
        .scrumboard{
        	margin:0 auto;
        	width:835px;
        }
        h1{
        	margin-left:20px;
        	font-size:2rem;
        }
          .column {
            width: 200px;
            float: left;
        		border: solid 4px black;
        		height:100vh;
          }
          .portlet {
            margin: 0 1em 1em 0;
            padding: 0.3em;
          }
          .portlet-header {
            padding: 0.2em 0.3em;
            margin-bottom: 0.5em;
            position: relative;
          }
          .portlet-toggle {
            position: absolute;
            top: 50%;
            right: 0;
            margin-top: -8px;
          }
          .portlet-content {
            padding: 0.4em;
          }
          .portlet-placeholder {
            border: 1px dotted black;
            margin: 0 1em 1em 0;
            height: 50px;
          }
    </style>



</head>

<body>
    <div class="scrumboard row">
        <div class="column flex">
            <!-- todo -->
            <h1>待完成</h1>
            <div class="portlet">
                <div class="portlet-header">Task</div>
                <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
            </div>

            <div class="portlet">
                <div class="portlet-header">Task</div>
                <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
            </div>

        </div>

        <div class="column flex">
            <!-- ongoing -->
            <h1>进行中</h1>

            <div class="portlet">
                <div class="portlet-header">Task</div>
                <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
            </div>

        </div>





        <div class="column flex">
            <!.........完整代码请登录后点击上方下载按钮下载查看