jQuery addClass example

Change class name on click in jQuery

by gol ngaz²

HTML

<script>

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

function drag(ev) {
  ev.explicitOriginalTarget.style.opacity = '1';
  console.log(ev.dataTransfer);
 
    ev.dataTransfer.setData("text", ev.target.id);
    ev.dataTransfer.setData("style", "background-color:red;");
    console.log(ev);
    //originalTarget.style.background-color", "red");
    $("#carreCache").css("display", "block");
    
}

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
    console.log(data);
    document.getElementById(data).style.opacity = "1";
}


</script>

qzdqzd



<h2>Drag and Drop</h2>
<p>Drag the image back and forth between the two div elements.</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
  <div id="carre" draggable="true" ondragstart="drag(event)" id="drag1"></div>
  <div id="carreCache" style="display:none;"></div>
</div>

<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

CSS

[draggable] {
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  /* Required to make elements draggable in old WebKit */
  -khtml-user-drag: element;
  -webkit-user-drag: element;
}
#div1, #div2 {
    float: left;
    width: 100px;
    height: 100px;
    margin: 10px;
    padding: 10px;
    border: 1px solid black;
}

#carre {
  box-shadow: 8px 10px 5px -8px rgba(207,207,207,1);
  background-color:blue;
}

#carre,#carreCache {
  display:block;
  width:100px;
  height:100px;
  position:absolute;
}

#carreCache {
  background-color:white;
}