jQuery UI except Selectable

selectable attribute instead of class

by David McClelland

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<!DOCTYPE html>
<html>

  <head>
  </head>

  <body>
    <p>
      Jquery UI draggable with HTML selectable/resizable
    </p>
    <div id="myDIV" style="resize: none;" selectable=false>
      <p>Choose resize mode and then drag the bottom right corner to resize this DIV element if allowed.</p>
    </div>
    <div class="jqui" id="draggableOne" selectable="true">Draggable One</div>
    <br />
    <div class="jqui" selectable="true" id="draggableTwo">Draggable Two</div>
    <div>

      <div>
        <p>Toggle Selectable mode</p>
        <input type="button" value="toggle" id="selectable" class="resizeButton">
      </div>
      <div>
        <p>Enable JQuery UI Modes</p>
        <input type="button" value="none" id="none" class="jquiButton">
        <input type="button" value="selectable" id="selectable" class="jquiButton">
        <input type="button" value="draggable" id="draggable" class="jquiButton">
      </div>
  </body>

</html>

CSS

.ui-selectable {
  cursor: pointer;
}

[selectable=true] {
    border: 2px dashed gray;
    cursor: grab;
}

input {
  width: 248px;
}

input[type='button'] {
  width: 48px;
}

input[type='checkbox'] {
  width: 48px;
}

#myDIV {
  border: 1px solid black;
  background-color: lightblue;
  width: 270px;
  overflow: auto;
}

#draggableOne {
  border: 2px solid gray;
  height: 100px;
  width: 200px;
  min-height: 100px;
  margin: 10px;
  padding: 0.5em;
  background-color: pink;
  opacity: 0.5;
}

#draggableTwo {
  border: 2px solid gray;
  width: 200px;
  overflow: auto;
  height: 100px;
  min-height: 100px;
  margin: 10px;
  padding: 0.5em;
  background-color: blue;
  opacity: 0.5;
}
p, label{
  font: 14px 'Arial', sans-serif;
}

JavaScript

let theDiv = $('#myDIV');
let jquiElements = $('.jqui');

theDiv.on('mouseup', function() {

});

$('.resizeButton').on('mouseup', (e) => {
  if (theDiv.attr('selectable') === 'true') {
    theDiv.attr('selectable', false);
    jquiElements.attr('selectable', false);
  } else {
    theDiv.attr('selectable', true);
    jquiElements.attr('selectable', true);
  }
});

// jquery UI starts here
$('.jquiButton').on('mouseup', (e) => {
  let jquiFeatureSet = $(e.target).attr('id');
  let jquiElements = $('.jqui');
  switch (jquiFeatureSet) {
    case 'none':
      jquiElements.attr('selectable', false);
      theDiv.attr('selectable', false);
      break;
    case 'selectable':
      jquiElements.attr('selectable', true);
      theDiv.attr('selectable', true);
      break;
    case 'draggable':
      if (theDiv.attr('selectable') === true) {
        jquiElements.draggable({
          containment: "#document",
          scroll: false,
          stack: "#content div"
        });
        theDiv.draggable({
          containment: "#document",
          scroll: false,
          stack: "#content div"
        });
      }
      break;
  }
});