Note that each task list is represented by a div element that contains a div element for each task. Also note that the div element for each task has a class of ui-state-default.

Add jQuery code that makes the tasks for each employee draggable. Set the cursor option of the draggable interaction to move so the cursor shown above is displayed as a task is being dragged. Also, set the grid option to [25, 34] so a task will snap into the droppable area.

Add jQuery code that makes the task lists for both employees droppable areas. When the drop event occurs, the draggable should be added to the end of the other tasks for the employee. Because the position of the draggable changes as its dragged, youll also need to set the top and left properties of the draggable to zero so it appears in the correct location within the droppable.

Add jQuery code that responds to the click event of the Add Task button for the first employee. When this button is clicked, use the prompt method to get a description of the task. If a description is entered and the OK button is clicked, add a task to the end of the other tasks for the employee. In addition, add code that makes the task you just added draggable.

Add jQuery code that responds to the click event of the Add Task button for the second employee. This code should work like the code for the first employee.

------------------------------------------------------------------------------------------

Code:

Task List by Employee

Kelly

Manage office personnel

Process payables

Process payroll

Juliette

Enter orders

Process invoices

-----------------------------------------------------------------------------------------------------------------------------------

CSS:

* {

margin: 0;

padding: 0;

}

body {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 87.5%;

width: 550px;

margin: 0 auto;

padding: 15px 25px;

}

h2 {

font-size: 125%;

margin-bottom: .5em;

}

h3 {

font-size: 110%;

margin-bottom: .5em;

}

#left {

width: 225px;

float: left;

}

#right {

width: 225px;

margin-left: 50px;

float: right;

}

#employee1, #employee2 {

list-style-type: none;

height: 250px;

border: 1px solid blue;

}

p {

margin-bottom: 5px;

padding: 5px;

}

.ui-selected {

color: blue;

}

input {

margin-top: 10px;

}