jQuery toggleClass example

Toggle class name on click in jQuery

by Ben Clayton

HTML

<div id="block" draggable=true ondragstart="drag(event)">
  <p>Drag me</p>
</div>


<div id="target-wrapper"  ondragenter="dragenter(event)">
  <p>TARGET</p>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#block {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}
#target-wrapper {
  background: #ffd;
  border-radius: 4px;
  padding: 10px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 30px auto;
  width: 200px;
}

.drag-icon {
  display: block;
  width: 100px;
  border: 1px solid red;
  height: 30px;
  border-radius: 6px;  
  background-color: rgba(20,100,20,0.3)
}

.drag-icon.over-something {
  width: 200px;
}

JavaScript

var drag_icon;
var origevent;

var drag = function(e,node) {
   drag_icon = document.createElement("div")
   drag_icon.className = "drag-icon";
   drag_icon.style.position = "absolute";
   drag_icon.style.top = "-100px";
   drag_icon.style.right = "0px";
   document.body.appendChild(drag_icon);
   e.dataTransfer.setDragImage(drag_icon, 0, 0);  
	 origevent = e;
}


var dragenter = function(e,node) {
		console.log("over");
    drag_icon.classList.add("over-something");
    var temp = document.createElement("div");
    document.body.appendChild(temp);
    origevent.dataTransfer.setDragImage(temp, 0, 0); 
   origevent.dataTransfer.setDragImage(drag_icon, 0, 0);  
}