Getting class name of dynamic draggable div

user_14810802 0
Viewed 71

I have a program that can create draggable <div></div>'s dynamically. The user can choose the color of the div. They can then drop any div into a tables <td></td>. when they're dropped in a td the td inherits the text of the <div></div> and the class of the <div></div> that was dropped in it.

But right now when I drop a div over a td it doesn't inherit the class of the div that was dropped in it.

I'm trying to access the class of the dropped <div></div>(or currently dragged <div></div>) with this:

var currentClass; //global variable
currentClass = $("#"+currentlyDragged).attr("class");

I'm trying to make the tds class the same as the div that was dropped on it with an else if statement like this:

if ($(currentClass).hasClass("blue ui-draggable ui-draggable-handle ui-draggable-dragging")){
    selectedTD.addClass("blue")
    console.log("changed to purple");
  } else if ($(currentClass).hasClass("red ui-draggable ui-draggable-handle ui-draggable-dragging")){
    selectedTD.addClass("red")
    console.log("changed to red");
  } else if ($(currentClass).hasClass("green ui-draggable ui-draggable-handle ui-draggable-dragging")){
    selectedTD.addClass("green")
  } else if ($(currentClass).hasClass("blue2 ui-draggable ui-draggable-handle ui-draggable-dragging")){
    selectedTD.addClass("blue2")
  }

But it doesn't work and I'm unsure why, am I getting the class name incorrectly? I know the class names look odd but that's the class name I got when I logged it to the console.

Here is my full code:

var text;
var selectedText;
var inputAssignments = document.getElementById("inputAssignments");

var currentlyDragged;
var currentClass;

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;
  newDiv.classList = "div";


  elementCounter++



  if (classN == "blue") {
    newDiv.classList = "blue"
  } else if (classN == "red") {
    newDiv.classList = "red"
  } else if (classN == "green") {
    newDiv.classList = "green"
  } else if (classN == "blue2") {
    newDiv.classList = "blue2"
  }

  // 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;


    $(function() {
      $("div").dblclick(function(e) {
        $("#editHeader").css("display", "block");
        clickedTD = event.target;
        $(clickedTD).addClass("selected");
      });
    });


    $("[id^='temp']").draggable({
      drag: function(e) {
        currentClass = $("#" + currentlyDragged).attr("class");
        console.log(currentClass);

        currentlyDragged = e.target.id;
        console.log(currentlyDragged)

        selectedText = event.target;
        text = $(selectedText).html();
      }
    });


    var slectedTD;
    $("td").droppable({
      drop: function(event, ui) {

        selectedTD = event.target.id; //$( "#mydiv" ).hasClass( "foo" )

        if ($(currentClass).hasClass("blue ui-draggable ui-draggable-handle ui-draggable-dragging")) {
          selectedTD.addClass("blue")
          console.log("changed to purple");
        } else if ($(currentClass).hasClass("red ui-draggable ui-draggable-handle ui-draggable-dragging")) {
          selectedTD.addClass("red")
          console.log("changed to red");

        } else if ($(currentClass).hasClass("green ui-draggable ui-draggable-handle ui-draggable-dragging")) {
          selectedTD.addClass("green")

        } else if ($(currentClass).hasClass("blue2 ui-draggable ui-draggable-handle ui-draggable-dragging")) {
          selectedTD.addClass("blue2")
        }

        console.log(selectedTD);

        $(this)
          .html(text);
        $("div").draggable();
        $("#" + currentlyDragged).remove();

      }
    });

  });

  document.getElementById("input").value = " ";


}
h1,
body {
  font-family: 'Roboto', sans-serif;
}

div {
  text-align: center;
  border: 1px solid #d3d3d3;
  width: 150px;
  height: 30px;
  padding: 10px;
  cursor: move;
  z-index: 10;
  background-color: white;
  color: blue;
}

.div {
  text-align: center;
  padding: 10px;
  cursor: move;
  background-color: white;
  color: blue;
}

td {
  border: 1px solid #d3d3d3;
  border-color: grey;
  padding: 10px;
  width: 150px;
  height: 30px;
  text-align: center;
}

.blue {
  background: linear-gradient(87deg, #5e72e4 0, #825ee4 100%);
  color: white;
  text-align: center;
  border: 1px solid #d3d3d3;
  width: 150px;
  height: 30px;
  background-color: rgb(0, 0, 225);
  padding: 10px;
  cursor: move;
  z-index: 10;
}

.blueBg {
  background: linear-gradient(87deg, #5e72e4 0, #825ee4 100%);
  color: white;
  text-align: center;
}

.red {
  background: linear-gradient(87deg, #f5365c 0, #f56036 100%);
  color: white;
  text-align: center;
  border: 1px solid #d3d3d3;
  width: 150px;
  height: 30px;
  background-color: rgb(255, 0, 0);
  padding: 10px;
  cursor: move;
  z-index: 10;
}

.redBg {
  background: linear-gradient(87deg, #f5365c 0, #f56036 100%);
  color: white;
  text-align: center;
}

.green {
  background: linear-gradient(87deg, #2dce89 0, #2dcecc 100%);
  color: white;
  text-align: center;
  border: 1px solid #d3d3d3;
  width: 150px;
  height: 30px;
  background-color: rgb(0, 128, 0);
  padding: 10px;
  cursor: move;
  z-index: 10;
}

.greenBg {
  background: linear-gradient(87deg, #2dce89 0, #2dcecc 100%);
  color: white;
  text-align: center;
}

.blue2 {
  background: linear-gradient(87deg, #11cdef 0, #1171ef 100%);
  color: white;
  text-align: center;
  border: 1px solid #d3d3d3;
  width: 150px;
  height: 30px;
  background-color: rgb(0, 255, 255);
  padding: 10px;
  cursor: move;
  z-index: 10;
}

.blue2Bg {
   background: linear-gradient(87deg, #11cdef 0, #1171ef 100%);
  color: white;
  text-align: center;
}

button {
  font-size: .875rem;
  border: none;
  border-radius: 3px;
  height: 40px;
  width: 90px;
  text-align: center;
  position: relative;
  transition: all .15s ease;
  letter-spacing: .025em;
  text-transform: uppercase;
  will-change: transform;
}

.button {
  font-size: .875rem;
  border: none;
  border-radius: 3px;
  height: 40px;
  width: 90px;
  background-color: red;
  text-align: center;
  position: relative;
  transition: all .15s ease;
  letter-spacing: .025em;
  text-transform: uppercase;
  will-change: transform;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>repl.it</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>

  <!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>





    <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.0.0-rc.5/dist/html2canvas.min.js">
    </script>



  </head>

  <body style="font-family: 'Roboto', sans-serif;">


    <body id="container">

      <header id="inputAssignments">
        <h1 id="mulAsi">Input Your Assignments for the week:</h1>
        <h1 style="display:none" id="oneAsi">Input Your Assignment:</h1>


        <input id="input" type="text" value="text">
        <button class="blue" id="blue" onclick="addElement()">Make it Purple</button>
        <button class="red" id="red" onclick="addElement()">Make it Red</button>
        <button class="green" id="green" onclick="addElement()">Make it Green</button>
        <button class="blue2" id="blue2" onclick="addElement()">Make it Blue</button>


        <button style="display:none" id="blue2" onclick="addElement();">input</button>

        <h1 height="30px"></h1>

        <button id="next" onclick="showSchedule()">Next</button>

        <i class="fas fa-times-circle"></i><button id="closeAddAssignmentBtn" onclick="closeInputA();" style="display:none">Close</button>

      </header>

      <p>Order your assignments, double click it to edit it</p>

    </body>


    <table border="1" style="border-color: grey;">
      <tr>
        <td width=100 id="cell1"></td>
        <td width=100></td>
        <td width=100></td>
        <td width=100></td>
        <td width=100></td>
      </tr>
    </table>



  </body>



  </header>
  <script src="script.js"></script>
</body>


<script src="script.js"></script>
</body>

</html>

css html jquery javascript
2 Answers

There some points I would like to point out -

  1. currentlyDragged = e.target.id; is done after currentClass = $("#" + currentlyDragged).attr("class");, it should be before.
  2. selectedTD = event.target.id; is an javascript element and not jQuery one, so selectedTD.addClass("blue") would not work. Select it as selectedTD = $(event.target);
  3. $(currentClass).hasClass("blue ui-draggable ui-draggable-handle ui-draggable-dragging") - $("#" + currentlyDragged).hasClass("blue") and similar for other conditions.

But I would suggest you don't use these global variables at all and do it as below -

var inputAssignments = document.getElementById("inputAssignments");


var elementCounter = 0;


function addElement() {
  var classN = event.target.id;

  var 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;
  $(newDiv).addClass(classN);


  elementCounter++

  // 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() {


    $(function() {
      $("div").dblclick(function(e) {
        $("#editHeader").css("display", "block");
        $(event.target).addClass("selected");
      });
    });


    $("[id^='temp']").draggable();


    $("td").droppable({
      drop: function(event, ui) {
        var $currentCell = $(event.target)
        var currentElement = ui.draggable;
        if (currentElement.hasClass("blue")) {
          $currentCell.addClass("blue")
        } else if (currentElement.hasClass("red")) {
          $currentCell.addClass("red")
        } else if (currentElement.hasClass("green")) {
          $currentCell.addClass("green")
        } else if (currentElement.hasClass("blue2")) {
          $currentCell.addClass("blue2")
        }
        $(this).html(text);
        $("div").draggable();
        currentElement.remove();
      }
    });

  });

  document.getElementById("input").value = " ";


}
h1,
body {
  font-family: 'Roboto', sans-serif;
}

div {
  text-align: center;
  border: 1px solid #d3d3d3;
  width: 150px;
  height: 30px;
  padding: 10px;
  cursor: move;
  z-index: 10;
  background-color: white;
  color: blue;
}

.div {
  text-align: center;
  padding: 10px;
  cursor: move;
  background-color: white;
  color: blue;
}

td {
  border: 1px solid #d3d3d3;
  border-color: grey;
  padding: 10px;
  width: 150px;
  height: 30px;
  text-align: center;
}

.blue {
  background: linear-gradient(87deg, #5e72e4 0, #825ee4 100%);
  color: white;
  text-align: center;
  border: 1px solid #d3d3d3;
  width: 150px;
  height: 30px;
  background-color: rgb(0, 0, 225);
  padding: 10px;
  cursor: move;
  z-index: 10;
}

.blueBg {
  background: linear-gradient(87deg, #5e72e4 0, #825ee4 100%);
  color: white;
  text-align: center;
}

.red {
  background: linear-gradient(87deg, #f5365c 0, #f56036 100%);
  color: white;
  text-align: center;
  border: 1px solid #d3d3d3;
  width: 150px;
  height: 30px;
  background-color: rgb(255, 0, 0);
  padding: 10px;
  cursor: move;
  z-index: 10;
}

.redBg {
  background: linear-gradient(87deg, #f5365c 0, #f56036 100%);
  color: white;
  text-align: center;
}

.green {
  background: linear-gradient(87deg, #2dce89 0, #2dcecc 100%);
  color: white;
  text-align: center;
  border: 1px solid #d3d3d3;
  width: 150px;
  height: 30px;
  background-color: rgb(0, 128, 0);
  padding: 10px;
  cursor: move;
  z-index: 10;
}

.greenBg {
  background: linear-gradient(87deg, #2dce89 0, #2dcecc 100%);
  color: white;
  text-align: center;
}

.blue2 {
  background: linear-gradient(87deg, #11cdef 0, #1171ef 100%);
  color: white;
  text-align: center;
  border: 1px solid #d3d3d3;
  width: 150px;
  height: 30px;
  background-color: rgb(0, 255, 255);
  padding: 10px;
  cursor: move;
  z-index: 10;
}

.greenBg {
  background: linear-gradient(87deg, #11cdef 0, #1171ef 100%);
  color: white;
  text-align: center;
}

button {
  font-size: .875rem;
  border: none;
  border-radius: 3px;
  height: 40px;
  width: 90px;
  text-align: center;
  position: relative;
  transition: all .15s ease;
  letter-spacing: .025em;
  text-transform: uppercase;
  will-change: transform;
}

.button {
  font-size: .875rem;
  border: none;
  border-radius: 3px;
  height: 40px;
  width: 90px;
  background-color: red;
  text-align: center;
  position: relative;
  transition: all .15s ease;
  letter-spacing: .025em;
  text-transform: uppercase;
  will-change: transform;
}
<body>

  <!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>



    <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>





    <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.0.0-rc.5/dist/html2canvas.min.js">
    </script>
  </head>

  <body style="font-family: 'Roboto', sans-serif;">


    <body id="container">

      <header id="inputAssignments">
        <h1 id="mulAsi">Input Your Assignments for the week:</h1>
        <h1 style="display:none" id="oneAsi">Input Your Assignment:</h1>


        <input id="input" type="text" value="text">
        <button class="blue" id="blue" onclick="addElement()">Make it Purple</button>
        <button class="red" id="red" onclick="addElement()">Make it Red</button>
        <button class="green" id="green" onclick="addElement()">Make it Green</button>
        <button class="blue2" id="blue2" onclick="addElement()">Make it Blue</button>


        <button style="display:none" id="blue2" onclick="addElement();">input</button>

        <h1 height="30px"></h1>

        <button id="next" onclick="showSchedule()">Next</button>

        <i class="fas fa-times-circle"></i><button id="closeAddAssignmentBtn" onclick="closeInputA();" style="display:none">Close</button>

      </header>

      <p>Order your assignments, double click it to edit it</p>

    </body>


    <table border="1" style="border-color: grey;">
      <tr>
        <td width=100 id="cell1"></td>
        <td width=100></td>
        <td width=100></td>
        <td width=100></td>
        <td width=100></td>
      </tr>
    </table>



  </body>



  </header>
</body>


</body>

</html>

user_92392670

You can give data-* attribute to your divs which are dynamically created with value of the color which you need to add to tds when drag. Then ,inside drop method use $(this).addClass($("#" + currentlyDragged).attr("data-id")) to add required class to td .

Demo Code :

var text;
var selectedText;
var inputAssignments = document.getElementById("inputAssignments");

var currentlyDragged;
var currentClass;

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;
  newDiv.classList = "div";
  elementCounter++
  if (classN == "blue") {
    newDiv.classList = "blue"
    newDiv.setAttribute("data-id", "blue"); //added attr with requierd color
  } else if (classN == "red") {
    newDiv.classList = "red"
    newDiv.setAttribute("data-id", "red");
  } else if (classN == "green") {
    newDiv.classList = "green"
    newDiv.setAttribute("data-id", "green");
  } else if (classN == "blue2") {
    newDiv.classList = "blue2"
    newDiv.setAttribute("data-id", "blue2");
  }
  // 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;


    $(function() {
      $("div").dblclick(function(e) {
        $("#editHeader").css("display", "block");
        clickedTD = event.target;
        $(clickedTD).addClass("selected");
      });
    });


    $("[id^='temp']").draggable({
      drag: function(e) {
        currentClass = $("#" + currentlyDragged).attr("class");
        console.log(currentClass);

        currentlyDragged = e.target.id;
        console.log(currentlyDragged)

        selectedText = event.target;
        text = $(selectedText).html();
      }
    });


    var slectedTD;
    $("td").droppable({
      drop: function(event, ui) {

        selectedTD = event.target.id;
        //use this to refer current td and `attr to get color from div`
        $(this).addClass($("#" + currentlyDragged).attr("data-id"))
        $(this).html(text);
        $("div").draggable();
        $("#" + currentlyDragged).remove();

      }
    });

  });

  document.getElementById("input").value = " ";


}
h1,
body {
  font-family: 'Roboto', sans-serif;
}

div {
  text-align: center;
  border: 1px solid #d3d3d3;
  width: 150px;
  height: 30px;
  padding: 10px;
  cursor: move;
  z-index: 10;
  background-color: white;
  color: blue;
}

.div {
  text-align: center;
  padding: 10px;
  cursor: move;
  background-color: white;
  color: blue;
}

td {
  border: 1px solid #d3d3d3;
  border-color: grey;
  padding: 10px;
  width: 150px;
  height: 30px;
  text-align: center;
}

.blue {
  background: linear-gradient(87deg, #5e72e4 0, #825ee4 100%);
  color: white;
  text-align: center;
  border: 1px solid #d3d3d3;
  width: 150px;
  height: 30px;
  background-color: rgb(0, 0, 225);
  padding: 10px;
  cursor: move;
  z-index: 10;
}

.blueBg {
  background: linear-gradient(87deg, #5e72e4 0, #825ee4 100%);
  color: white;
  text-align: center;
}

.red {
  background: linear-gradient(87deg, #f5365c 0, #f56036 100%);
  color: white;
  text-align: center;
  border: 1px solid #d3d3d3;
  width: 150px;
  height: 30px;
  background-color: rgb(255, 0, 0);
  padding: 10px;
  cursor: move;
  z-index: 10;
}

.redBg {
  background: linear-gradient(87deg, #f5365c 0, #f56036 100%);
  color: white;
  text-align: center;
}

.green {
  background: linear-gradient(87deg, #2dce89 0, #2dcecc 100%);
  color: white;
  text-align: center;
  border: 1px solid #d3d3d3;
  width: 150px;
  height: 30px;
  background-color: rgb(0, 128, 0);
  padding: 10px;
  cursor: move;
  z-index: 10;
}

.greenBg {
  background: linear-gradient(87deg, #2dce89 0, #2dcecc 100%);
  color: white;
  text-align: center;
}

.blue2 {
  background: linear-gradient(87deg, #11cdef 0, #1171ef 100%);
  color: white;
  text-align: center;
  border: 1px solid #d3d3d3;
  width: 150px;
  height: 30px;
  background-color: rgb(0, 255, 255);
  padding: 10px;
  cursor: move;
  z-index: 10;
}

.greenBg {
  background: linear-gradient(87deg, #11cdef 0, #1171ef 100%);
  color: white;
  text-align: center;
}

button {
  font-size: .875rem;
  border: none;
  border-radius: 3px;
  height: 40px;
  width: 90px;
  text-align: center;
  position: relative;
  transition: all .15s ease;
  letter-spacing: .025em;
  text-transform: uppercase;
  will-change: transform;
}

.button {
  font-size: .875rem;
  border: none;
  border-radius: 3px;
  height: 40px;
  width: 90px;
  background-color: red;
  text-align: center;
  position: relative;
  transition: all .15s ease;
  letter-spacing: .025em;
  text-transform: uppercase;
  will-change: transform;
}
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<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>
<script src="https://cdn.jsdelivr.net/npm/html2canvas@1.0.0-rc.5/dist/html2canvas.min.js">
</script>


<input id="input" type="text" value="text">
<button class="blue" id="blue" onclick="addElement()">Make it Purple</button>
<button class="red" id="red" onclick="addElement()">Make it Red</button>
<button class="green" id="green" onclick="addElement()">Make it Green</button>
<button class="blue2" id="blue2" onclick="addElement()">Make it Blue</button>


<button style="display:none" id="blue2" onclick="addElement();">input</button>

<h1 height="30px"></h1>

<button id="next" onclick="showSchedule()">Next</button>

<i class="fas fa-times-circle"></i><button id="closeAddAssignmentBtn" onclick="closeInputA();" style="display:none">Close</button>

<table border="1" style="border-color: grey;">
  <tr>
    <td width=100 id="cell1"></td>
    <td width=100></td>
    <td width=100></td>
    <td width=100></td>
    <td width=100></td>
  </tr>
</table>

user_106064000
Related