jQuery addClass example

Change class name on click in jQuery

by Florent27000

HTML

<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="'.$donnees->id.'"><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({
      containment : '#dqip',
        // Évènement appelé lorsque l'élément est relâché
        stop: function(event, ui){
        console.log('top = '+ui.position.top);
        console.log('left = '+ui.position.left);
        console.log($(this).attr("id"));
    }).resizable({
      stop: function(event, ui){
        console.log('hauteur = '+ui.size.height);
        console.log('largeur = '+ui.size.width);
    });