I have this program that can make dynamically draggable <div></div>'s with text and a background color(red or blue) of the users choice. The user can then drag the div to a <td></td> in a table and the same text and background color of the dropped should be displayed.
But right now when you drag a div to a <td></td> the background color isn't (for some reason it gives the td a blue background color)
This is the function I'm using to change the background and text of the <td></td>:
$("td").droppable({
drop: function( event, ui ) {
var selectedDiv = event.target;
$( this )
.html(text);
$("div").draggable();
$( "#"+currentlyDragged ).remove();
if ($(selectedDiv).css('background-color', 'blue')){
$( this ).css('background-color', 'blue');
} else if ($(selectedDiv).css('background-color', 'red')){
$( this ).css('background-color', 'red');
}
}
});
but it dosen't work, is my syntax incorrect?
Here the full version of my code:
var text;
var selectedText;
var inputBox = document.getElementById("input");
function showInputBox(){
inputBox.style.display = "block";
}
function showSchedule(){
var inputAssignments = document.getElementById("inputAssignments");
var schedule = document.getElementById("schedule");
inputAssignments.style.display = "none";
schedule.style.display = "block";
}
var elementCounter = 0;
function addElement() {
var classN = event.target.id;
text = document.getElementById("input").value;
// create a new div element and give it a unique id
var newDiv = document.createElement("div");
newDiv.id = 'temp'+elementCounter;
elementCounter++
if (classN == "blue"){
newDiv.style.backgroundColor = "blue;"
} else if (classN == "red"){
newDiv.style.backgroundColor = "red";
}
// and give it some content
var newContent = document.createTextNode(text);
// add the text node to the newly created div
newDiv.appendChild(newContent);
// add the newly created element and its content into the DOM
var currentDiv = document.getElementById("div1");
document.body.insertBefore(newDiv, currentDiv);
$(function() {
var currentlyDragged;
$("div").draggable({
drag: function (e) {
currentlyDragged = e.target.id
selectedText = event.target;
text = $(selectedText).html();
}
});
$("td").droppable({
drop: function( event, ui ) {
var selectedDiv = event.target;
$( this )
.html(text);
$("div").draggable();
$( "#"+currentlyDragged ).remove();
if ($(selectedDiv).css('background-color', 'blue')){
$( this ).css('background-color', 'blue');
} else if ($(selectedDiv).css('background-color', 'red')){
$( this ).css('background-color', 'red');
}
}
});
});
document.getElementById("input").value = " ";
}body{
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
div {
text-align: center;
border: 1px solid #d3d3d3;
width: 100px;
padding: 10px;
cursor: move;
z-index: 10;
background-color: #2196F3;
color: #fff;
}
.div3 {
position: absolute;
text-align: center;
border: 1px solid #d3d3d3;
padding: 10px;
cursor: move;
z-index: 10;
height: 20px ;
background-color: white;
width: 20px;
color: #fff;
}
.div {
text-align: center;
padding: 10px;
cursor: move;
background-color: #2196F3;
color: #fff;
}
.divRed {
text-align: center;
padding: 10px;
cursor: move;
background-color: red;
color: #fff;
}
td{
border: 1px solid #d3d3d3;
padding: 10px;
height: 20px ;
width: 200px;
}
div:hover {
background-color: yellow;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<header id="inputAssignments">
<h1>Input text:</h1>
<input id="input" type="text" value="text">
<button id="blue" onclick="addElement()" >Make it Blue</button>
<button id="red" onclick="addElement()" >Make it Red</button>
<h1 height="30px"></h1>
<button id ="next" onclick="showSchedule()">Next</button>
</header>
<header id="schedule" style="display:none">
<p>Drag your outputs to a td:</p>
<table border="1">
<tr>
<td width=100></td>
<td width=100></td>
<td width=100></td>
<td width=100></td>
<td width=100></td>
</tr>
</table>
</header>
<script src="script.js"></script>
</body>
</html>
