Skip to content

Instantly share code, notes, and snippets.

@Henriquedn

Henriquedn/index.html

Forked from archiechen/index.html
Last active August 29, 2015 14:27
Show Gist options
  • Save Henriquedn/23e52da7b948e734d5be to your computer and use it in GitHub Desktop.
Save Henriquedn/23e52da7b948e734d5be to your computer and use it in GitHub Desktop.
Download ZIP
use bootstrap css and jqueryui to draggable and droppable
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap, from Twitter</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
<link href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<style>
body {
padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
}
.cardbox {border: 1px solid #AAA;float: left;margin-left: 10px;min-height: 46em;padding-left: 0.2em; width: 31%; }
.cardbox h4 { line-height: 16px; margin: 0 0 0.4em; }
.cardbox h5 { margin: 0.1em 0.1em 0 0.1em; }
.cardbox.custom-state-active { background: #eee; }
.cardbox li {background-color: white;border: 1px solid #AAA;color: #222;float: left;height: 84px;list-style: none;margin: 0.3em;padding: 0.2em;width: 164px;}
.cardbox li a { cursor: move; margin: 0 0 0.4em; }
.cardbox li p { float: right; margin: 0 10px 10px; }
</style>
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Fav and touch icons -->
<link rel="shortcut icon" href="http://twitter.github.com/bootstrap/assets/ico/favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="http://twitter.github.com/bootstrap/assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://twitter.github.com/bootstrap/assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://twitter.github.com/bootstrap/assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="http://twitter.github.com/bootstrap/assets/ico/apple-touch-icon-57-precomposed.png"></head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Project name</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active">
<a href="#">Home</a>
</li>
<li>
<a href="#about">About</a>
</li>
<li>
<a href="#contact">Contact</a>
</li>
</ul>
</div>
<!--/.nav-collapse --> </div>
</div>
</div>
<div class="container">
<div id="new_tasks" class="cardbox">
<h4 class="page-header">New</h4>
<ul class="ui-helper-reset">
<li>
<h5>在弹出窗口中输入任务信息，点击save按钮保存到数据库。</h5>
</li>
<li>
<h5>任务卡片可以在状态栏之间拖拽。</h5>
</li>
<li>
<h5>任务卡片可以在状态栏之间拖拽。</h5>
</li>
</ul>
</div>
<div id="progress_tasks" class="cardbox">
<h4 class="page-header">Progress</h4>
</div>
<div id="done_tasks" class="cardbox">
<h4 class="page-header">Done</h4>
</div>
</div>
<!-- /container -->
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="http://twitter.github.com/bootstrap/assets/js/jquery.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-transition.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-alert.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-modal.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-dropdown.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-scrollspy.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-tab.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-tooltip.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-popover.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-button.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-collapse.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-carousel.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-typeahead.js"></script>
<script lang="javascript">
$(document).ready(function() {
var $new_tasks = $( "#new_tasks" ),
$progress_tasks = $( "#progress_tasks" ),
$done_tasks = $( "#done_tasks" );
$( "li", $new_tasks ).draggable({
revert: "invalid",
containment: "document",
helper: "clone",
cursor: "move"
});
$new_tasks.droppable({
accept: "#progress_tasks li,#done_tasks li",
activeClass: "ui-state-highlight",
drop: function( event, ui ) {
move_item( ui.draggable , $new_tasks);
}
});
$progress_tasks.droppable({
accept: "#new_tasks li",
activeClass: "ui-state-highlight",
drop: function( event, ui ) {
move_item( ui.draggable , $progress_tasks);
}
});
$done_tasks.droppable({
accept: "#progress_tasks li",
activeClass: "ui-state-highlight",
drop: function( event, ui ) {
move_item( ui.draggable , $done_tasks);
}
});
function move_item( $item, $tasks) {
$item.fadeOut(function() {
var $list = $( "ul", $tasks ).length ?
$( "ul", $tasks ) :
$( "<ul class='ui-helper-reset'/>" ).appendTo( $tasks );
$item.appendTo( $list ).fadeIn();
});
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment