Получение имени класса динамического перетаскиваемого div

#javascript #html #jquery #css

#javascript #HTML #jquery #css

Вопрос:

У меня есть программа, которая может создавать перетаскиваемые <div></div>'s динамически. Пользователь может выбрать цвет div. Затем они могут поместить любой div в таблицы <td></td> . когда они удаляются в td, td наследует текст <div></div> и класс <div></div> , который был удален в нем.

Но прямо сейчас, когда я помещаю div поверх td, он не наследует класс div, который был удален в нем.

Я пытаюсь получить доступ к классу удаляемого <div></div> (или перетаскиваемого в данный момент <div></div> ) с помощью этого:

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

Я пытаюсь сделать класс tds таким же, как div, который был удален с помощью оператора else if, подобного этому:

 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")
  }

Но это не работает, и я не уверен, почему, я неправильно получаю имя класса? Я знаю, что имена классов выглядят странно, но это имя класса, которое я получил, когда зарегистрировал его на консоли.

Вот мой полный код:

 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>

Развернуть фрагмент

Ответ №1:

Есть некоторые моменты, на которые я хотел бы обратить внимание —

currentlyDragged = e.target.id; выполняется после currentClass = $("#" currentlyDragged).attr("class"); , это должно быть до.
selectedTD = event.target.id; является элементом javascript, а не jQuery, поэтому selectedTD.addClass("blue") не будет работать. Выберите его как selectedTD = $(event.target);
$(currentClass).hasClass("blue ui-draggable ui-draggable-handle ui-draggable-dragging") — $("#" currentlyDragged).hasClass("blue") и аналогично для других условий.

Но я бы посоветовал вам вообще не использовать эти глобальные переменные и делать это, как показано ниже —

 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>

Развернуть фрагмент

Ответ №2:

Вы можете присвоить data-* атрибут вашим разделам, которые создаются динамически, со значением цвета, который вам нужно добавить в tds при перетаскивании. Затем внутренний drop метод используется $(this).addClass($("#" currentlyDragged).attr("data-id")) для добавления требуемого класса в td .

Демонстрационный код :

 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>

Развернуть фрагмент

Вопрос:

Ответ №1:

Ответ №2:

Вам также может понравиться

Проблема с Android AVD

Требуется справка AutoCompleteExtender

Как предотвратить дочерние маршруты в Vue.js от потери стилей при обновлении страницы