HTML Only Resize, jquery UI drag and drop

Can the outermost element container HTML resize jQueryUI enabled contents?

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 selectable and draggable prevent HTML resizable from working.
    </p>
    <div id="myDIV" style="resize: none;">
      <p>Choose resize mode and then drag the bottom right corner to resize this DIV element if allowed.</p>
      <div class="jqui" id="draggableOne">Draggable One</div>
      <br />
      <div class="jqui" id="draggableTwo">Draggable Two</div>
    </div>
    <p></p>
    <input type="text" id="outputText" placeholder="new dimensions">
    <div>
      <p></p>
      <input type="text" id="prevText" placeholder="previous dimensions">
    </div>
    <div>
      <p></p>
      <input type="text" id="origText" placeholder="orig dimensions">
    </div>
    <p></p>
    <div>
      <p>Select Resize mode</p>
      <input type="button" value="none" id="none" class="resizeButton">
      <input type="button" value="V" id="vertical" class="resizeButton">
      <input type="button" value="H" id="horizontal" class="resizeButton">
      <input type="button" value="both" id="both" class="resizeButton">
      <div>
        <input type="checkbox" value="false" id="override" class="" />
        <label for="override">Override JqueryUI?</label>
      </div>
    </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">
      <input type="button" value="both" id="both" class="jquiButton">
    </div>
  </body>

</html>

CSS

.ui-selectable {
  cursor: pointer;
}

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 override = $("#override").is(":checked");

theDiv.on('mouseup', function() {
  outputText.value = ('New Dimensions: ' + theDiv.css('height') + ' H X ' + theDiv.css('width') + ' W');
});

theDiv.on('mousedown', function() {
if(override===true) {
  if (theDiv.draggable) {
    theDiv.draggable('destroy');
  }
  if (theDiv.selectable) {
    jquiElements.selectable('destroy');
  }
  }
  prevText.value = ('Previous Dimensions: ' + theDiv.css('height') + ' H X ' + theDiv.css('width') + ' W');
});

origText.value = ('Original Dimensions: ' + theDiv.css('height') + ' H X ' + theDiv.css('width') + ' W');

$('.resizeButton').on('mouseup', (e) => {
  let resizeRestriction = $(e.target).attr('id');
  theDiv.css('resize', resizeRestriction);
});

$('#override').on('change', (e) => {
	override = $("#override").is(":checked");
});

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

//theDiv.selectable();

/*$("#draggableOne").draggable({
  containment: "#document",
  scroll: false,
  stack: "#content...