Task Allocation

NZ_Kiwis

So I'm required to build a page where I can see what my employees are doing over the next few weeks (that period of time needs to be customizable at run time so it may be a month or just 1 week.

I see this like a GANTT chart. Employees down the left Y column and time across the X. All made up of individual DIV elements.

I guess I have two questions

How can I overlay and DIV on another DIV. Let's say Employee 1 has a task which will take 2 and 1/2 days to complete. I want to overlay this on his schedule.
How can I drag and drop this DIV to another employee?

jeepin81

1.) To place a div over a div you'd use the z-index.

2.) For dragging and dropping divs you could use a javascript library like jquery or mootools.

Or, find an open source solution like http://www.webstudiodev.com/planner/ to create the scheduler. Just a thought.

HTH

sneakyimp

I'm not Javascript master, but I love JQuery. Jquery UI has a thing called Draggable that looks pretty simple.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Draggable - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
#draggable { width: 150px; height: 150px; padding: 0.5em; }
</style>
<script>
$(function() {
$( "#draggable" ).draggable();
});
</script>
</head>
<body>
<div id="draggable" class="ui-widget-content">
<p>Drag me around</p>
</div>
</body>
</html>

johanafm

jeepin81;11045063 wrote:
1.) To place a div over a div you'd use the z-index.

Or you can put overlay one div on another by nesting it, depending on your needs.

<style>
.outer {
   padding: 0;
}
.inner {
   margin: 0;
   width: 100%;
   height: 100%;
}
</style>
<div class="outer">
   <div class="inner">
   </div>
</div>