jQuery addClass example

Change class name on click in jQuery

by Florent27000

HTML

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
			<div id="dqip">
			  <a href="#" id="1" style="position: absolute; right: 5px; top:5px;" class="ajout-boite ">ajouter</a>

			  <div class="resizeDiv" style="left: 30px; top: 30px; width: 50px; height: 50px;" id="41">
			    <div class="id_button">1</div>
			  </div>

			</div>

CSS

.resizeDiv:hover{ 
        opacity : 0.8;
     }
      .resizeDiv{ 
        position: absolute; 
        border : 1px solid #1877D5;
        background : #84BEFD;
        opacity : 0.3;
     }
div.id_button {
  cursor: move;
  margin:0;
  padding:0px 2px;
  position: absolute;
  top: -23px;
  left: -1px;
  color: #000;
  z-index: 10;
  font-size: 14px;
  background-color: red;
  opacity: 0.9!important;
  border: 1px dashed #000;
  display: none;
}
.resizeDiv:hover div.id_button {
display: block;
}

      #dqip{  
        position: relative;
        margin-top: 2px;
        margin-bottom: 2px;
        height: 400px;
        width: 650px;
        border: 1px solid #000;
      }

JavaScript

//
$(".ajout-boite").on('click', function() {
  $('#dqip').append('<div class="resizeDiv ui-draggable ui-draggable-handle ui-resizable" style="left: 388px; top: 17px; width: 78px; height: 65px;" id="5"><div class="id_button">2</div><div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-s" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90;"></div></div>');
});

$('.resizeDiv').draggable({}).resizable({});