jQuery addClass example

Change class name on click in jQuery

by Thanos Saringelos

HTML

<div id="banner-message">
  <p>Hello World</p>
  <button class='draggable'>Change color</button>
</div>

CSS

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

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s; 
  width: 300px;
}

button {
  background: #0084ff;
  border: none;  
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff; 
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

JavaScript

var draggedIcon;

 $('body').on("mousedown", ".draggable", function(e) {

   var offset = $("#banner-message").offset();
   console.log(e.pageY - offset.top)




   draggedIcon = $(this).clone().appendTo("#banner-message");
   draggedIcon.css('position', 'absolute');
   draggedIcon.css('left', e.pageX - offset.left);
   draggedIcon.css('top', e.pageY - offset.top);

 }).on("mouseup", ".draggable", function(e) {
   if (draggedIcon) {
     draggedIcon.remove();
     draggedIcon = undefined;
   }
 });