Skip to content

Instantly share code, notes, and snippets.

@archiechen
Created December 19, 2012 10:22
  • Star 2 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save archiechen/4335764 to your computer and use it in GitHub Desktop.
使用backbone重构拖拽效果。
<!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 id="taskboards" class="container"></div>
<!-- /container -->
<!-- Templates -->
<script type="text/template" id="taskboard-template">
<h4 class="page-header"><%-name%></h4>
<ul id="taskcards_ul" class="ui-helper-reset"></ul>
</script>
<!-- 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://backbonejs.org/test/vendor/underscore.js"></script>
<script src="http://backbonejs.org/backbone.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 Task = Backbone.Model.extend({});
var TaskList = Backbone.Collection.extend({
model: Task
});
var TaskCard = Backbone.View.extend({
tagName: "li",
template: _.template('<h5><%-title%></h5>'),
initialize:function(){
this.$el.draggable({
revert: "invalid",
containment: "document",
helper: "clone",
cursor: "move"
});
this.model.on('dropped',this.dropped,this);
},
render: function() {
this.$el.html(this.template(this.model.toJSON()));
this.$el.attr('id', this.model.cid);
return this;
},
dropped:function(){
this.$el.fadeOut();
}
});
var TaskBoard = Backbone.View.extend({
tagName: "div",
className:"cardbox",
template: _.template($('#taskboard-template').html()),
initialize:function(){
this.render();
//绑定一个任务集合
this.tasks = this.options.tasks||new TaskList;
//监听任务集合的add事件
this.tasks.on('add',this.addOne,this);
this.tasks.on('remove',this.removeOne,this);
var that = this;
this.$el.droppable({
activeClass: "ui-state-highlight",
drop: function( event, ui ) {
var cid = $(ui.draggable).attr('id');
//遍历所有任务集合
_.each([newTasks,progressTasks,doneTasks],function(from){
//跳过当前状态栏的任务集合
if(that.tasks!=from){
var draggableTask = from.get(cid);
if(typeof draggableTask != 'undefined') {
from.remove(draggableTask);
that.tasks.push(draggableTask);
}
}
});
}
});
},
render: function() {
this.$el.html(this.template({name:this.options.name}));
this.taskcards = this.$('#taskcards_ul');
return this;
},
addOne: function(task){
var taskcard = new TaskCard({model:task});
taskcard.render().$el.appendTo(this.taskcards).fadeIn();
},
removeOne: function(task){
task.trigger("dropped");
}
});
//创建任务对象
var task1 = new Task({'title':'在弹出窗口中输入任务信息,点击save按钮保存到数据库。'});
var task2 = new Task({'title':'任务卡片可以在状态栏之间拖拽。'});
//创建卡片对象
var taskCard1 = new TaskCard({model:task1});
var taskCard2 = new TaskCard({model:task2});
//创建任务集合
var newTasks = new TaskList;
var progressTasks = new TaskList;
var doneTasks = new TaskList;
var newTaskBoard = new TaskBoard({
name:'New',
//设置任务栏关联的任务集合
tasks:newTasks
});
var progressTaskBoard = new TaskBoard({
name:'Progress',
tasks:progressTasks
});
var doneTaskBoard = new TaskBoard({
name:'Done',
tasks:doneTasks
});
$('#taskboards').append(newTaskBoard.$el);
$('#taskboards').append(progressTaskBoard.$el);
$('#taskboards').append(doneTaskBoard.$el);
//将卡片放到NEW状态的任务栏中
newTasks.add(task1);
newTasks.add(task2);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment