0

i've got snippet for this 

function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("Text", ev.target.id);
  ev.dataTransfer.setData("class", ev.target.classList);
}

function drop(ev, id, classelement) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("Text");
  var classs = ev.dataTransfer.getData("class");
  document.getElementById(id).classList.add(classs);
  var classel = String(classelement);
  var claskurang = classs.slice(0, classs.length - 1);
  if (classel.includes(claskurang)) {
    var hapus = claskurang + "1" + claskurang + "2" + claskurang + "3";
    alert(hapus);
    document.getElementById(id).classList.remove(hapus);
  }

}
body {
  margin: 0;
  padding: 0;
  height: 700px;
}

.hamburger {
  float: right;
  font-size: 40px;
  cursor: pointer;
  transition: .5s;
}

.hamburger:hover {
  background-color: #00AAFD;
  color: white;
}

#content {
  height: fit-content;
  background-color: #00AAFD;
  float: right;
  width: fit-content;
  text-align: center;
}

#content h3 {
  margin-left: 10px;
  margin-right: 10px;
}

#content div {
  width: 25px;
  height: 25px;
  margin: 10px;
  cursor: pointer;
}

.image1 {
  background-color: #3b5998;
}

.image2 {
  background-color: mediumpurple;
}

.image3 {
  background-color: #1dc116;
}

.border1 {
  border: 1px solid black;
}

.border2 {
  border: 1px dashed black;
}

.border3 {
  border: 1px dotted black;
}

.fcolor1 {
  color: lightgreen;
}

.fcolor2 {
  color: #1d9c23;
}

.fcolor3 {
  color: #5e5e5e;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body id="div1" ondrop="drop(event,this.id,this.classList)" ondragover="allowDrop(event)">
  <p id="asd"></p>
  <div class="fitur">
    <div id="content">
      <h3><b>Background Color</b></h3>
      <div class="image1" id="body" draggable="true" ondragstart="drag(event)"></div>
      <div class="image2" id="body" draggable="true" ondragstart="drag(event)"></div>
      <div class="image3" id="body" draggable="true" ondragstart="drag(event)"></div>
      <h3><b>Table Border</b></h3>
      <div class="border1" id="table" draggable="true" ondragstart="drag(event)"></div>
      <div class="border2" id="table" draggable="true" ondragstart="drag(event)"></div>
      <div class="border3" id="table" draggable="true" ondragstart="drag(event)"></div>
      <h3><b>Font Color</b></h3>
      <div class="fcolor1" id="font" draggable="true" ondragstart="drag(event)">Lorem</div>
      <div class="fcolor2" id="font" draggable="true" ondragstart="drag(event)">Lorem</div>
      <div class="fcolor3" id="font" draggable="true" ondragstart="drag(event)">Lorem</div>
      <span class="hamburger">=</span>
    </div>
    <input type="text" id="id" name="id" placeholder="ID" readonly>
    <input type="text" id="nama" name="nama" placeholder="Nama">
    <input type="text" id="kelas" name="kelas" placeholder="kelas" />
    <input type="button" id="cmd" value="Insert" onclick="displayResult(this.value)">
    <input type="button" id="clear" value="Clear data" onclick="cleardata()">
    <table id="myTable" border="1" ondrop="drop(event,this.id,this.class)" ondragover="allowDrop(event)">
      <tr>
        <td>ID</td>
        <td>Nama</td>
        <td>Kelas </td>
        <td>Button</td>
      </tr>
    </table>
    <div id="isi">
    </div>
</body>

this is my main code that i've got problem with

function drop(ev,id,classelement) {
        ev.preventDefault();
        var data = ev.dataTransfer.getData("Text");
        var classs = ev.dataTransfer.getData("class");
        document.getElementById(id).classList.add(classs);
        var classel = String(classelement);
        var claskurang = classs.slice(0,classs.length -1);
         if(classel.includes(claskurang)) {
         var hapus = claskurang+"1"+claskurang+"2"+claskurang+"3";
            document.getElementById(id).classList.remove(hapus);
        }

    }

i've try to give space after claskurang like claskurang+"1 " but it still error and the console says this
console error
and this is the output when i alert the variable "hapus"
output when var hapus alerted

well actually i want to make a drag and drop and i want to remove the class that has been same as class that is in the element, for example if i add border class to body element, i want to remove ONLY the border class and replace it into the class that i add (using drag and drop)

Improve this question
11
  • What is your question? Commented Apr 19, 2018 at 9:30
  • 3
    should it not be claskurang+"1,"+claskurang+"2,"+claskurang+"3"; Take a look at developer.mozilla.org/en-US/docs/Web/API/Element/… Commented Apr 19, 2018 at 9:30
  • 1
    There is no jQuery here. Tags removed Commented Apr 19, 2018 at 9:33
  • This question was caused by a problem that can no longer be reproduced or a simple typographical error. While similar questions may be on-topic here, this one was resolved in a manner unlikely to help future readers. Commented Apr 19, 2018 at 9:34
  • @luca i want to make a drag and drop and i want to remove the class that has been same as class that is in the element, for example if i add border class to body element, i want to remove ONLY the border class and replace it into the class that i add (using drag and drop) Commented Apr 19, 2018 at 9:37
Related questions
219
Removing elements by class name
2
How to remove the class in javascript?
2
jquery remove multiple variable classes
Load 7 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.