Drag and Drop Styles via a Class

This JavaScript program shows how to drag and drop a style on an element using a class.

DragAndDropStyles.html

<!DOCTYPE html>
<html>
  <head>
  	<style>
#idDiv1, #idDiv2 {
	border:1px gray solid;
	width:250px;
	height:50px;
}
.cDropContent {
	background: repeating-conic-gradient(lightgray 0 25%, transparent 0 50%);
	background-size: 8px 8px;
}
  	</style>
    <script>
function allowDrop(qEvent) {
  qEvent.preventDefault();
}

function onDragStart(qEvent) {
  qEvent.dataTransfer.setData("text", qEvent.target.id);
}

function onDrop(qEvent) {
  qEvent.preventDefault();
  var sDragId = qEvent.dataTransfer.getData("text");
  var qSrcElement = document.getElementById(sDragId);
  var qTargetElement = qEvent.target;
  // Prevent change for self-drops
  if (qSrcElement === qTargetElement) {
  	return;
  }
  MakeDraggable(qTargetElement, qSrcElement.className);
  RemoveDraggability(qSrcElement);
}

function MakeDraggable(qElement, sClass) {
	qElement.draggable = true;
	qElement.className = sClass;
	qElement.addEventListener("dragstart", onDragStart);
}
function RemoveDraggability(qElement) {
	qElement.draggable = false;
	qElement.className = "";
	qElement.removeEventListener("dragstart", onDragStart);
}
    </script>
  </head>
  <body>
  	<!-- The second line of properties get altered on drop -->
  	<div id="idDiv1" ondrop="onDrop(event)" ondragover="allowDrop(event)"
  		draggable="true" class="cDropContent" ondragstart="onDragStart(event)">
  	</div>
  	<div id="idDiv2" ondrop="onDrop(event)" ondragover="allowDrop(event)"></div>
  </body>
</html>

Core JavaScript

Drag and Drop Styles via a Class

DragAndDropStyles.html

Output