New JQuery User - Help with Drag and Drop UI
"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."
I have struggled with this for DAYS on end, researching the "how-to's" and reading through Murach's Jquery (2015 edition as required for the class) with no success.
My code is displayed below - I have everything working correctly, and formatted appropriately, but the newly added task is not being considered an "event" that allows the drag and drop functionality. I sincerely appreciate any help/guidance that anyone is willing to offer. Thanks a ton!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Task Management</title>
<link rel="stylesheet" href="jquery-ui-1.11.4.custom/jquery-ui.min.css">
<link rel="stylesheet" href="main.css">
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="jquery-ui-1.11.4.custom/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
/***********Define Add Task buttons and their functions**********/
$("#add1").button();
$("#add1").click(function() {
var task = window.prompt("Please enter a new task", "Work harder");
if (task == "")
{
alert("Task cannot be null, please try again");
}
else {
$("#employee1").append('<div class="ui-state-default ui-draggable ui-draggable-handle">'
+ '<p>' + task + '</p></div>');
$task.append(ui-draggable);
}
});
$("#add2").button();
$("#add2").click(function() {
var task = window.prompt("Please enter a new task", "Stop complaining");
if (task == "")
{
alert("Task cannot be null, please try again");
}
else {
$(task).append('<div class="ui-state-default ui-draggable ui-draggable-handle" style="position: relative;">'
+ '<p>' + task).draggable();
$task.ui.draggable.attr("style", "");
}
});
/***********Define drag and drop functions**********/
$('.ui-state-default').draggable({
containment: "",
connectWith: ".connectedSortable",
cursor: "move",
grid: [25, 34]
// addClasses: true
});
$(".taskList").droppable({
drop: function(event, ui) {
ui.draggable.css({
top: 0,
left: 0
});
$(this).append(ui.draggable);
//$(task).append(ui.draggable);
}
});
$(task).each(function(event, ui) {
draggable({
containment: "",
connectWith: ".connectedSortable",
cursor: "move",
grid: [25, 34]
});
});
});
</script>
<main>
<h2>Task List by Employee</h2>
<div id="left">
<h3>Kelly</h3>
<div id="employee1" class="taskList">
<div class="ui-state-default">
<p>Manage office personnel</p>
</div>
<div class="ui-state-default">
<p>Process payables</p>
</div>
<div class="ui-state-default">
<p>Process payroll</p>
</div>
</div>
<input type="button" id="add1" value="Add Task">
</div>
<div id="right">
<h3>Juliette</h3>
<div id="employee2" class="taskList connectedSortable">
<div class="ui-state-default">
<p>Enter orders</p>
</div>
<div class="ui-state-default">
<p>Process invoices</p>
</div>
</div>
<input type="button" id="add2" value="Add Task">
</div>
</main>
Topic Participants
rudyfyan1987
jakecigar