jQuery addClass example

Change class name on click in jQuery

by Twisty

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="//use.fontawesome.com/releases/v5.0.10/css/all.css">
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="app-1" class="ui-widget">
  <div class="tools">
    <button class="select">Select</button>
    <button class="rect">Rectangle</button>
  </div>
  <div class="work-area canvas">
  </div>
</div>

CSS

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

#app-1 {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 480px;
  height: 400px;
  position: relative;
}

.tools {
  width: 80px;
  border: 1px solid #aaa;
  background: #ccc;
  border-radius: 4px;
  padding: .2em 0;
}

.tools .ui-button .ui-icon {
  background: none repeat scroll 0 0 transparent;
  text-indent: 0;
  margin-top: -0.5em;
  height: 25px;
  width: 25px;
}

.tools .ui-icon.icon-large {
  margin-top: -0.75em;
}

.tools .ui-button-icon-only .ui-icon {
  /* Bump it - jQuery UI is -8px */
  margin-left: -0.5em;
}

.work-area {
  background: #eee;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 380px;
  height: 400px;
  position: absolute;
  top: 20px;
  left: 120px;
}

.canvas .draw {
  border: 2px solid #222;
}

JavaScript

$(function() {
  var toolFunction = null;
  var action = null;

  function calcBoxDim(x1, y1, x2, y2) {
    var dim = {};
    dim.width = x2 - x1;
    dim.height = y2 - y1;
    dim.top = y1;
    dim.left = x1;
    dim.right = x2;
    dim.bottom = y2;
    dim.center = [x1 + (dim.width / 2), y1 + (dim.height / 2)];
    return dim;
  }

  function makeCanvasDrag($o) {
    $o.draggable({
      containment: $(".canvas")
    });
  }

  function makeCanvasResize($o) {
    $o.resizable({
      containment: $(".canvas")
    });
  }

  function makeRect(x1, y1, x2, y2, ev) {
    var box = calcBoxDim(x1, y1, x2, y2);
    var rect = $("<div>", {
      id: "rect-" + ($(".canvas .rectangle").length + 1),
      class: "draw rectangle move resize"
    }).appendTo($(".canvas")).css({
      width: box.width + "px",
      height: box.height + "px",
      top: (box.top - $(".canvas").position().top) + "px",
      left: (box.left - $(".canvas").position().left) + "px",
      position: "absolute"
    });
    return rect;
  }
  $(".tools button").button({
    showLabel: false,
    icon: "none"
  });
  $(".rect").button("option", "icon", "far fa-square").click(function() {
    toolFunction = "rect";
    action = "draw";
    $(".canvas").selectable({
      start: function(e) {
        $(".canvas").data("drawRectMouseDown", e);
      },
      stop: function(e) {
        var down = $(".canvas").data("drawRectMouseDown");
        var up = e;
        makeRect(down.pageX, down.pageY, up.pageX, up.pageY, e);
        makeCanvasDrag($(".canvas .move"));
        makeCanvasResize($(".canvas .resize"));
        toolFunction = null;
        action = null;
      }
    });
  });
  $(".select").button("option", "icon", "fas fa-mouse-pointer")
});