Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
tree: 2843ee6874
Fetching contributors…

Cannot retrieve contributors at this time

138 lines (121 sloc) 3.506 kb
<!DOCTYPE HTML>
<html>
<head>
<meta charset="iso-8859-1">
<title>Simple Agile Planning Board (IE compatible)</title>
<style>
body
{
font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
}
#board
{
width: 910px;
min-height:100px;
position:relative;
}
.title
{
background-color:#52460a;
text-align:center;
color:white;
padding: 2px 0px;
}
#todo, #inprogress, #done
{
background-color: tan;
width: 300px;
min-height:150px;
border: 2px solid black;
display: table-cell;
border-collapse: collapse;
}
*[draggable=true]
{
float:left;
min-width: 50px;
min-height: 50px;
border: 2px solid black;
margin: 10px;
display: block;
font-weight:bold;
text-decoration: none;
min-height:60px;
background-image: -webkit-gradient(linear,
left top, left bottom,
color-stop(0.63, white),
color-stop(0.92, rgb(5,161,245)));
background-image:-moz-linear-gradient(
center top,
white 63%,
rgb(5,161,245) 92%
);
-webkit-background-size:1px 8px;
-moz-background-size:1px 8px;
background-size:1px 8px;
background-repeat:repeat;
}
.cardTitle
{
background-color: rgb(255,255,255);
border:2px solid white;
}
</style>
</head>
<body>
<div id="board">
<div id="todo">
<div class="title">To Do</div>
<a id="item1" draggable="true" href="#" onclick="return false;">
<div class="cardTitle">
Learn HTML5
</div>
</a>
<a id="item2" draggable="true" href="#" onclick="return false;">
<div class="cardTitle">
Learn CSS3
</div>
</a>
<a id="item3" draggable="true" href="#" onclick="return false;">
<div class="cardTitle">
Make an amazing site
</div>
</a>
<a id="item4" draggable="true" href="#" onclick="return false;">
<div class="cardTitle">
Impress my friends
</div>
</a>
</div>
<div id="inprogress">
<div class="title">In Progress</div>
</div>
<div id="done">
<div class="title">Done</div>
</div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js">
</script>
<script type="text/javascript">
$('document').ready(init);
function init(){
$('[draggable=true]').bind('dragstart', function(event) {
event.originalEvent.dataTransfer.setData("Text", event.target.getAttribute('id'));
});
// bind the dragover event on the board sections
$('#todo, #inprogress, #done').bind('dragover', function(event) {
event.preventDefault();
return false;
});
// bind the drop event on the board sections
$('#todo, #inprogress, #done').bind('drop', function(event) {
var notecard = event.originalEvent.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(notecard));
// Turn off the default behaviour
// without this, FF will try and go to a URL with your id's name
event.preventDefault();
});
}
</script>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.